webpack的使用

1、webpack可以干什么？

          它是一个静态模块打包器；css、html、js都被打包为一行，去除多余的回车、空格、引号，开发阶段不需要打包，项目上线时，需要打包代码；

2、全局安装

       npm install webpack -g

       npm install webpack-cli -g

3、局部安装

        npm install webpack -s

        npm install webpack-cli -s

4、打包 (webpack命令可以只打包js)

        默认的入口： src/index.js

        默认的出口：dist/main.js

5、压缩代码的模式

         webpack --mode production（生产模式）

         webpack --mode development（开发模式）

6、webpack的配置

       webpack默认只打包js文件，如果要打包html,css，需要做相应的配置

       四个核心概念：

        1、入口

        2、出口

        3、loader

        4、插件

        配置文件：webpack.config.js

7、本地服务webpack-dev-server

       1)、安装webpack-dev-server     npm install webpack-dev-server -s

       2)、配置webpack.config.js

              devServer: { contentBase: "./public",//本地服务的路径 inline: true,//实时刷新 }

       3)、package.json配置：

              "dev": "webpack-dev-server --open --inline"

8、loader

         npm install css-loader style-loader -s

         npm install file-loader -s

         file-loader和url-loader的区别：https://blog.csdn.net/huangpb123/article/details/78561963
9、插件

   html-webpack-plugin

 plugins: [
    new HtmlWebpackPlugin({
        template: "./src/index.html",
        minify: {
            removeAttributeQuotes: true,//去除多余引号
            removeComments: true,//去除注释
            removeEmptyAttributes: true,//去除空属性
            collapseWhitespace: true//去除空格回车
        }
    })
]

10、html中的img

      html-withimg-loader：让html可以支持图片

11、css的提取分离

     npm install extract-text-webpack-plugin@next -s

12、babel