webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

1.安装webpack

　　1.1需要先在项目中npm init初始化一下，生成package.json

1.2 npm install webpack webpack-cli -D

2.webpack配置

在根目录创建一个webpack.config.js文件，用于配置一些webpack，所有的配置项都会在webpack进行配置。并在目录里面创建一个src目录。然后再src目录创建一个index.js文件和html文件。

在index.html文件中写入一个div标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>webpack配置学习</title>

</head>

<body>

    <div id="root"></div>

</body>

</html>

webpack配置目录

const path = require('path')

module.exports = {

    mode: 'development',

    entry: './src/index.js' //入口文件

    output: {

        //出口

        path: path.resolve(__dirname, 'dist'), //打包生成的目录
        filename: 'index.js'  //生成目录的文件名字,单个js文件使用  
    } 
}

配置多文件打包,如果是两个js文件

entry: {

        main: './src/index.js', //入口文件

        sub: './src/index.js'

    },

这时候需要在output中的filename中配置

filename: '[name].js' //打包生成目录多个js文件的时候

2.1webpack配置图片

在我的src目录中准备一张图片，在index.js中写入

import avatar from './item.png'

var img = new Image()

img.src = avatar

var root = document.getElementById('root')

root.append(img)

配置webpack模块化(module),首先先安装,选择使用yarn的方式安装

yarn add  url-loader --save-dev
module: {

        rules: [

            {

                test: /\.(png|jpg|gif)$/,

                use: {

                    loader: 'url-loader',

                    options: {

                        name: '[name]_[hash].[ext]', //图片名字加上hash值

                        outputPath: 'images/', //打包之后图片存放的一个目录里面

                        limit:

                            //limit图片大小设置，如果超过10240字节，打包会生成目录和图片，如果没有超过设置的大小，会默认打包压缩在js中的base64

                    }

                }

            }

        ]

    },

在package.json文件配置，每次执行 npm run dev就会打包，会在你的根目录生成dist目录

"scripts": {

        "dev": "webpack"

    },

2.2webapck对css(scss)预处理器处理

首先需要安装下面这些插件

yarn add  css-loader --save-dev

yarn add node-sass --save-dev

yarn add sass-loader --save-dev

yarn add scss-loader --save-dev

yarn add style-loader --save-dev

在webapck中写入

module: {

        rules: [

            {

                test: /\.scss$/,

                // css-loader处理css文件 style-loader把css-loader处理好的文件挂载到header标签上，sass-loader对scss预处理器配置,postcss-loader处理css前缀

                use: [

                    'style-loader',

                    {

                        loader: 'css-loader',

                        options: {
　　　　　　　　　　　　　　　　modules: true, //模块化打包，
　　　　　　　　　　　　　　　 importLoaders:  //每次加载都会执行sass-loader和postcss-loader  
　　　　　　　　　　　　　　} 
　　　　　　　　　　　　}, 
　　　　　　　　　　　　'sass-loader', 
　　　　　　　　　　　　'postcss-loader'  浏览器前缀
　　　　　　　　　　] 
　　　　　　　　} 
　　　　　　] 
　　　　},

如果想对css进行模块化处理，需要配置

options: {

　modules: true, //模块化打包，

　importLoaders:  //每次加载都会执行sass-loader和postcss-loader

}

在目录中创建一个scss文件，写入一些简单的css文件

body {

    .avatar {

        width: 50%;

        border: 1px solid red;

        transform: translate(100px, 100px);

    }

}

　在index.js文件中写入

import avatar from './item.png'
import createdAvatar from './createdAvatar.js'  引入js文件
import style from './index.scss'

var img = new Image()

img.src = avatar

img.classList.add(style.avatar)

var root = document.getElementById('root')

root.append(img)
createdAvatar() //使用
 

在创建一个js文件，然后再index.js文件中引入，

import avatar from './item.png'

function createdAvatar() {

    var img = new Image()

    img.src = avatar;

    img.classList.add('avatar')

    var root = document.getElementById('root');

    root.append(img)

}

export default createdAvatar;

　　打包之后可以在浏览器看到，有样式，一个没有

在上面的css中，我们使用了css3，但是浏览器并没有自动给我加上前缀，这时候，需要我们手动配置一些。

安装

yarn add postcss-loader --save-dev

需要在你的根目录创建一个postcss.config.js文件，

安装

yarn add autoprefixer --save-dev

使用，

module.exports = {

    plugins: [

        require('autoprefixer')

    ]

}

// 用与处理css在不同浏览器自动加上前缀问题

　　然后再你的css配置中使用 postcss-loader，运行打包，再次在浏览器可以看到，对于一些css3浏览器自动加上前缀

2.3webpack对字体进行处理

先行iconfont下载一些字体，放入自己的src目录里面，需要在index.js文件引入并使用

import './iconfont.scss'

var root = document.getElementById('root')

root.innerHTML = "<div class='iconfont iconchangjingguanli'></div>"

然后需要在webpack进行一些配置，首先安装一个插件

yarn add file-loader --save-dev

使用

module: {

        rules: [{

                test: /\.(eot|ttf|svg)$/,

                use: {

                    loader: 'file-loader'

                }

            }

        ]

    },

再次运行npm run dev打包之后，可以在浏览器看到我们的字体图标了

2.4webpack配置html打包文件处理

如果想每次打包之后，dist目录都会给我们生成一个html文件，这时候需要安装一个插件

yarn  add html-webpack-plugin --save-dev

然后在webapck.config.js文件中引入

const HtmlWebpackPlugin = require('html-webpack-plugin')

　使用 HtmlWebpackPlugin打包之后自动生成html文件，

plugins: [

        new HtmlWebpackPlugin({

            template: 'src/index.html'

        })

    ],

　　

每次打包需要重新更新一下dist目录，删除里面的文件，重新生成一个新的，这时候需要安装另一个插件

yarn  add  clean-webpack-plugin --save-dev

　也是需要在webpack.config.js引入

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

　　使用和HtmlWebpackPlugin一样

plugins: [

        // HtmlWebpackPlugin打包之后自动生成html文件，

        new HtmlWebpackPlugin({

            template: 'src/index.html'

        }),

        // CleanWebpackPlugin打包之前先自动清除dist目录里面所有的文件，

        new CleanWebpackPlugin()

    ],

　　

2.5SourceMap配置，用于检测在代码打包之后，检测问题，定位到那个行

module.exports = {

    devtool: 'cheap-inline-source-map',

}

　　配置选项如下

　　//source-map 打包之后会生成map文件，性能比较慢，用于检测代码打包之后错误信息提示

    //eval 打包最快，不会生成.map文件，

    //inline-source-map 打包不会生成.map文件，在打包的js文件生成base64

    //如果是在development 开发环境  使用cheak-module-eval-source-map,不会生成.map文件，但是集成在打包之后main.js中eval中

    //cheap-inline-source-map 打包不会生成.map文件，在打包的js文件生成base64

    //如果是在production 线上环境 使用cheak-module-source-map,会打包生成.map文件

webpack配置插件特别多，需要慢慢的来，理解常用的场景配置就可以了。剩下的需要单独查阅资料就可以了解其中配置以及原理

webpack4配置学习(一)的更多相关文章

  1. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(四)：开源的Silverlight运行容器的编译、配置

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  2. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(三)：配置ActiveXForm运行环境

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  3. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(二)：配置WinClient分布式运行环境

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  4. Tomcat集群配置学习篇-----分布式应用

    Tomcat集群配置学习篇-----分布式应用 现目前基于javaWeb开发的应用系统已经比比皆是,尤其是电子商务网站,要想网站发展壮大,那么必然就得能够承受住庞大的网站访问量:大家知道如果服务器访问 ...

  5. Chapter 2. OpenSSL的安装和配置学习笔记

    Chapter 2. OpenSSL的安装和配置学习笔记 2.1 在linux上面安装OpenSSL我还是做点No paper事情比较在行,正好和老师的课程接轨一下.以前尝试过在Windows上面安装 ...

  6. webpack4配置详解之常用插件分享

    前言 继上一次webpack的基础配置分享之后,本次将分享一些工作中项目常用的配置插件.也会包含一些自己了解过觉得不错的插件,如有分析不到位的,欢迎纠错,嗯,这些东西文档都有,大佬可绕过. Wepac ...

  7. redis 安装配置学习笔记

    redis 安装配置学习笔记 //wget http://download.redis.io/releases/redis-2.8.17.tar.gz 下载最新版本 wget http://downl ...

  8. 转载 Tomcat集群配置学习篇-----分布式应用

    Tomcat集群配置学习篇-----分布式应用 现目前基于javaWeb开发的应用系统已经比比皆是,尤其是电子商务网站,要想网站发展壮大,那么必然就得能够承受住庞大的网站访问量:大家知道如果服务器访问 ...

  9. vue第二单元(webpack的配置-学习webpack的常用配置)

    第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...

随机推荐

  1. php实现微信拼手气红包

    $result = sendHB(3, 5); echo '<pre>'; var_export($result); echo array_sum($result); /** * 拼手气红 ...

  2. 华为云EI人脸识别接口初探

    0. 准备工作 开户及申请开通人脸识别服务,可以参考https://education.huaweicloud.com:8443/courses/course-v1:HuaweiX+CBUCNXE01 ...

  3. 搞清楚一道关于Integer的面试题

    请看题1: public class IntegerDemo { public static void main(String[] args) { Integer a = 888; Integer b ...

  4. 基于串口通信做my_printf时遇到的坑儿

    首先,完成了串口向终端putty的打印函数ConsolePrint(),但该函数只能打印字符串,无法像stdio库中的printf函数一样打印整数和浮点数等. 因此,我先是使用了标准库stdio中的s ...

  5. 你真的了解JMM吗？

    引言 在现代计算机中,cpu的指令速度远超内存的存取速度,由于计算机的存储设备与处理器的运算速度有几个数量级的差距,所以现代计算机系统都不得不加入一层读写速度尽可能接近处理器运算速度的高速缓存(Cac ...

  6. js之观察者模式和发布订阅模式区别

    观察者模式(Observer) 观察者模式指的是一个对象(Subject)维持一系列依赖于它的对象(Observer),当有关状态发生变更时 Subject 对象则通知一系列 Observer 对象进 ...

  7. CSS 3D图片翻转 ——3D Flipping Effect

    效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. nbuoj2780 旅游问题

    题目:http://www.nbuoj.com/v8.83/Problems/Problem.php?pid=2780 题意:莫得题意 原以为是道究极蠢的贪心,但是被一发wa打脸,给上wa点,还是太年 ...

  9. CF595 Div31249A,1249B1,1249B2,1249C1,1249C2,1249D1,1249D2,1249E,1249F）题解

    A:水题,先排序,有相连的输出2,否则输出1. #include<bits/stdc++.h> using namespace std; #define pii pair<int,i ...

  10. 2019CCPC秦皇岛 K MUV LUV UNLIMITED(博弈)

    MUV LUV UNLIMITED Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...