webpack的学习之旅

Webpack的学习之旅

1. 打开cmd,进入项目文件夹，输入命令cnpm init,会在文件夹的根目录里面生成package.json文件,他即使项目引用的nodejs（cnpm）插件的索引，用cnpm install可以安装所有罗列的插件。

2. 在文件的根目录下新建webpack.config.js, 它的就是一个项目的配置文件,告诉webpack需要做什么。

3. 在根目录下新建dist文件夹，用于存放打包后的文件。

4. 全局安装webpack。 命令cnpm install -g webpack

5. 安装webpack的依赖包 cnpm install webpack –save-dev

6. 在package.json的script里面配置webpack --config webpack.config.js --progress --display-modules --colors --display-reasons，以后打包的过程中可以看到打包的过程。

7. 在webpack.config.js里开始配置

   entry:入口文件

       output:{

    path:打包后的入口文件的目录

    filename: 打包后的入口文件的名字

    publicPath:打包后的给文件添加正式环境的路径}

8. 安装html-webpack-plugin插件，处理html文件

命令:cnpm i html-webpack-plugin –save-dev,在package.json的devDependencies里面成功的信息。

9. 在webpack.config.js中引入插件,

  plugins:[

    new htmlWebpackPlugin({

            template:模板文件

             filename:打包后的文件名字

             title:给打包后的文件添加标题

                 inject:引入的js等文件放在html

(body或者head)。

             minify:{

                 removeComments:删除注释

                 collapseWhitespace:删除空格

             }

    })]

10.安装clean-webpack-plugin,可以清除打包过程中旧的带版本号的重复文件，让文件只显示最新版本的文件。

a)  在webpack.config.js中引入插件,格require(“件名字”)

b)  在plugins里面实例化改插件，new 插件名字(‘[目录]’)

指定目录可以将该目录下的文件保留最新的版本。

11.安装style-loader,css-loader,处理css文件。
    安装命令 cnpm i style-loader css-loader –save-dev

12.处理js,sass,less的格式方法都和css类似，如

     module:{

        rules:[

           {

              test:/\.css$/,

               use:[

                  'style-loader',

                  {

                    loader:'css-loader',                  options:{modules:false,importLoaders:1}

                  },

                 {

                    loader:'postcss-loader',

                    options:{

                       plugins:[

                            require('autoprefixer')({

                                browsers:['last 5 version']

                            })

                       ]

                    }

                  }

               ]

           }

        ]

}

13.如果让css自动加上浏览器前缀，还要安装postcss-loader, autoprefixer。（此时最好去掉publicPath，如果不在正式环境下的话）