webpack4.x配置

1.全局安装webpack相关包

	npm i webpack webpack-cli webpack-dev-server -g

2.新建一个项目目录
文件夹结构如下：
3.初始化node环境

npm init -y

使用了 -f（代表force）、-y（代表yes），可以跳过提问阶段，直接生成一个新的 package.json 文件。

这时，会发现自动生成了一个package.json文件

4.使用全局webpack默认方式打包
首先，在src目录下新建一个index.js文件

由于webpack4.x中打包默认找src/index.js作为默认入口，可以在终端中直接输入命令webpack将当前内容进行一个简单的打包

这时会发现dist目录下多了一个main.js文件，和一个node_modules文件夹
并且我们发现，控制台有警告

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

这是因为webpack，有两种打包环境，一个是开发环境：development另外一个是生产环境：production
打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了，使用webpack --mode=production 打包时，代码会被压缩，体积会小很多

5.使用本地配置进行打包
在config文件夹下新建webpack.config.js
现在目录结构如下：

这时，如果我们把index.js文件重新命名成为main.js后，执行webpack --mode=development
发现会报错，ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\imooc\webpack-demo'，这是因为webpack4.x默认找src下的index.js文件，找不到便会报如上的错误。这时，我们就可以通过配置webpack相关的配置文件来修改打包入口。
首先我们配置webpack入口

然后配置webpack.config.js文件

注：[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
配置好后，我们执行npm run build 就可执行打包了

6.设置webpack-dev-server
因为最开始已经在全局安装了webpack-dev-server，这里不需要再下载安装了。首先，在webpack.config.js中进行配置

如果这个时候，我们执行webpack-dev-server，会报错

这时，我们还需要在package.json中进行配置

完成以上配置后，我们执行npm run server就可以启动服务了
如果我们在dist下新建一个index.html文件

我们npm run server启动服务后，就可以通过 http://localhost:8888/ 访问页面了
这里访问的路径，是我们之前配置的

7.CSS文件打包
在对CSS打包时，需要对webpack.config.js中的Loaders配置进行了解。
Loaders可以把Sass，Less文件转换成CSS，也可把项目中的ES6,ES7编译成浏览器能正常解析的js。
首先，我们在src下新建一个css文件，文件路径 /src/css/index.css

将CSS文件引入JS中进行打包，首先将CSS引入到JS文件中

这时，我们进行打包，会报错

对css打包，我们需要下载配置CSS的loader：style-loader 和 css-loader
在终端输入命令： npm i style-loader css-loader --save 下载依赖包，安装好后，在webpack.config.js中进行配置

最后，我们npm run build就可以正常打包啦

然后，启动服务，就可以在浏览器中看到效果啦

8.打包HTML文件
现在我们对html进行打包，这个时候，我们需要手动将dist文件夹下面的index.html文件移动到src文件下，并去掉JS引入代码（webpack会自动为我们引入JS），然后打包时自动在dist文件夹生成
然后我们安装html-webpack-plugin插件，然后在webpack.config.js中进行配置

npm i html-webpack-plugin --save

然后，在webpack.config.js 中的plugins里面进行配置

   //插件，用于生产模块和各项功能
    plugins:[
        new htmlPlugin({
            minify:{ //是对html文件进行压缩
                removeAttributeQuotes:true  //removeAttrubuteQuotes是却掉属性的双引号。
            },
            hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
            template:'./src/index.html' //是要打包的html模版路径和文件名称。
           
        })
    ],

这个时候，我们执行npm run build 后，可以看到dist文件下自动生成了一个index.html文件，并且自动为我们引入了js

9. CSS中图片处理
在CSS中引入一个图片

然后，我们直接执行npm run build 打包，会报如下错误

这里我们需要引入两个解析图片的loader file-loader 和url-loader

npm i file-loader url-loader --save

并配置webpack.config.js

 {
                test:/\.(png|jpg|gif|jpeg)/,  //是匹配图片文件后缀名称
                use:[{
                    loader:'url-loader', //是指定使用的loader和loader的配置参数
                    options:{
                        limit:500  //是把小于500B的文件打成Base64的格式，写入JS
                    }
                }]
    }

url-loader工作分两种情况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。

这时，我们运行 npm run build 就可以正常打包了

10.CSS分离和图片路径处理
1）分离CSS
这里我们主要把CSS从JS文件中分离出来，并解决一个如何处理分离出来后CSS中的图片路径不对的问题
我们现在需要下载css分离插件：extract-text-webpack-plugin

npm i extract-text-webpack-plugin --save

安装好后，在webpack.config.js中进行配置

然后在plugins属性中配置css分离后的路径

 new extractTextPlugin("css/index.css")  //这里的/css/index.css 是分离后的路径

然后修改配置中css的loader的配置

但是这个时候进行打包会报错，这是因为我们用的是webpack4.0以上的版本
解决办法：升级extract-text-webpack-plugin

npm i extract-text-webpack-plugin@next --save

这样会下载到+ extract-text-webpack-plugin@4.0.0-beta.0

然后打包就正常啦
2）配置静态文件路径
publicPath:是在webpack.config.js文件的output选项中，主要作用是处理静态文件路径
在处理前，我们在webpack.dev.config.js 上方声明一个对象，叫website

var website ={
    publicPath:"http://localhost:8888/"
}
这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。

然后output选项中引用这个对象的publicPath属性

//出口文件的配置项
output:{
    //打包的路径
    path:path.resolve(__dirname,'../dist'),
    //打包的文件名称
    filename:'[name].js',
    publicPath:website.publicPath  //publicPath：主要作用就是处理静态文件路径的。
},

配置完成后，你再使用webpack命令进行打包，你会发现原来的相对路径改为了绝对路径，这样来讲速度更快。

11.处理HTML中的图片
在webpack中是不喜欢你使用标签来引入图片的，但是我们作前端的人特别热衷于这种写法，国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题，如何把图片放到指定的文件夹下
首先下载html-withimg-loader 解决的问题就是在hmtl文件中引入标签的问题.
首先安装

npm i html-withimg-loader --save

然后在webpack.config.js中配置loader

{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

最后，进行打包，就会发现已经生成了相应的文件了

12.Less文件的打包和分离
1）Less文件打包
Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特想，使CSS更易维护和扩展
首先，安装Less的服务

 npm i less --save

然后，安装Less-loader打包

npm i less-loader --save

再去webpack.config.js配置less-loader

//less loader
            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    }, 
                    {
                        loader: "css-loader" // translates CSS into CommonJS
                    },
                    {
                        loader: "less-loader" // compiles Less to CSS
                    }
                ]
            }

编写一个less文件

@base :#000;
#study{
    width:300px;
    height:300px;
    background-color:@base;
}

导入到js文件中

最后就可以打包了

2）Less文件分离
这里和上面CSS文件分离基本一样

 //less loader
            {
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            //     [{
            //            loader: "style-loader" // creates style nodes from JS strings
            //         }, 
            //         {
            //             loader: "css-loader" // translates CSS into CommonJS
            //         },
            //         {
            //             loader: "less-loader" // compiles Less to CSS
            //    }]
            }

配置好，进行打包后，会发现Less分离到了index.css文件中了
13.SASS文件的打包和分离
1）SASS文件打包
其实sass跟less 的配置很像，这里sass首先要安装两个包，node-sass和sass-loader,因为sass-loader依赖于node-sass，所以需要先安装node-sass

npm install  node-sass --save-dev 

然后再安装

npm install  sass-loader --save-dev 

配置loader

   //scss loader
           {
               test: /\.scss$/,
               use: [{
                   loader: "style-loader" // creates style nodes from JS strings
               }, {
                   loader: "css-loader" // translates CSS into CommonJS
               }, {
                   loader: "sass-loader" // compiles Sass to CSS
               }]
           }

这里跟上面的less 一样，写好loader配置后，就可以编写sass文件了，但是不要忘记把sass文件引入到main.js中。

2）SASS文件分离

{
            test: /\.scss$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }
配置好以后我们 `npm run build` 就可以看到了dist下面的index.css中有了indexsass.scss中写的被解析的代码

14.给webpack增加babel支持
安装bable

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

在webpack.dev.config.js中配置Babel的方法如下：

//babel 配置
           {
               test:/\.(jsx|js)$/,
               use:{
                   loader:'babel-loader',
                   options:{
                       presets:[
                           "es2015","react"
                       ]
                   }
               },
               exclude:/node_modules/
           }

然后在main.js中用es6语法写一些代码，然后打包就可以看见打包成功了

15…babelrc配置
虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，如果卸载webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置卸载.babelrc文件里。
在项目根目录新建.babelrc文件，并把配置写到文件里。
.babelrc文件下

{
    "presets":["react","es2015"]
}

这时候.webpack.dev.config.js里的loader配置

//babel 配置
           {
               test:/\.(jsx|js)$/,
               use:{
                   loader:'babel-loader',
               },
               exclude:/node_modules/
           }

16.ENV
现在网络上已经不流行babel-preset-es2015，现在官方推荐使用的是babel-preset-env,那我们为了紧跟潮流，我们在讲一下env的配置方法。
首先需要下载：

npm install --save-dev babel-preset-env

然后修改.babelrc里的配置文件。其实只要把之前的es2015换成env就可以了。

{
    "presets":["react","env"]
}