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，若是不在正式環境下的話）