webpack基礎配置

conqorld發表於2019-04-17
Web

學習了下webpack華麗花哨讓人頭疼的基礎配置，趕緊來做個記錄。 先初始化package.json,再安裝個webpack和webpack-dev-server，再來個腳手架webpack-cli：

npm init -y
npm i webpack webpack-cli webpack-dev-server -D   //-D只在開發時使用
複製程式碼

安裝完成後在根目錄下建立個webpack.config.js,我們來看看基礎配置項都有哪些。

基本配置模組

let path = require('path') //webpack遵循node規範，使用require進行引入
module.exports = {
    entry: './src/index.js', //入口
    output: {
        filename: "js/[name][hash:8].js", //給輸出的js打hash號
        path: path.resolve('./static') //必須是絕對路徑
    }, //出口
    devServer: {}, //開發伺服器
    module: {}, //模組配置
    plugins: [], //外掛配置
    mode: "development", //可以更改模式
    resolve: {}, //配置解析
}
複製程式碼

檔案入口是src目錄下的index.js,打包好的js都放入static目錄下的js目錄中。

在package.js中配置相關命令，到時候只需要在命令列輸入npm run xxx就可以執行了。

{
...
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack ",
      "start": "webpack-dev-server"
  }
 ...
}
複製程式碼

伺服器配置

接下來給伺服器進行配置。

module.exports = {
...
    devServer: {//webpack-dev-server配置
        contentBase: './dev', //執行時檔案打包資料夾（不可見）
        port: 6767, //執行埠
        compress: true, //伺服器壓縮
        open: true, //自動開啟瀏覽器
        hot: true //熱更新}, //開發伺服器
    }
...
}
複製程式碼

配置完成後在命令列輸入npm run start就可以啟動伺服器。

plugins外掛配置

plugins 選項用於以各種方式自定義 webpack 構建過程。webpack 附帶了各種內建外掛，可以通過 webpack.[plugin-name] 訪問這些外掛。

先將外掛進行安裝：

npm i html-webpack-plugin clean-webpack-plugin extract-text-webpack-plugin copy-webpack-plugin -D
複製程式碼
let HtmlWebpackPlugin = require('html-webpack-plugin') //html-webpack-plugin html自動引入打包的js
let CleanWebpackPlugin = require('clean-webpack-plugin') //清除舊的打包js
let webpack = require('webpack')
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') //打包成單獨css/less檔案
let CopyWebpackPlugin = require('copy-webpack-plugin') //將原檔案複製到打包資料夾
module.exports = {
...
plugins: [
        new CopyWebpackPlugin([
            {
                from: './src/doc', //需要複製的檔案地址
                to: './' //打算複製到的地方
            }
        ]),
        new ExtractTextWebpackPlugin({
            filename: 'css/index.css', //打包後的檔案
            disable: true //開發時不需要使用單獨打包，可以開啟disable屬性
        }),
        new webpack.HotModuleReplacementPlugin(), //熱更新外掛
        new CleanWebpackPlugin(), //清除舊的打包js
        new HtmlWebpackPlugin({
            filename: "index.html", //生成的html名字
            template: "./src/index.html", //模板html所在位置
            title: "index", //更改html對應title
            hash: true, //給js打版本號！
            minify: { //壓縮
                removeAttributeQuotes: true, //刪掉屬性雙引號
                collapseWhitespace: true //摺疊空行
            },
        }),//html-webpack-plugin html自動引入打包的js
    ], //外掛配置
...
}
複製程式碼

如果想要檢視外掛的文件，可以開啟地址https://www.npmjs.com/package/包名字，進行檢視，例如：www.npmjs.com/package/htm…

webpack官方提供了一個外掛列表，可以去官網檢視。www.webpackjs.com/plugins/

module模組配置

要想配置處理模組的規則，我們就在module中進行配置。 先安裝需要外掛：

npm i extract-text-webpack-plugin css-loader style-loader postcss-loader less-loader autoprefixer -D
複製程式碼
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') //打包成單獨css/less檔案

module.exports = {
...
    module: {
        rules: [ //從右往左解析
            {
                test: /\.css$/, use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {loader: "css-loader"},
                        {loader: "postcss-loader"} //加字首
                    ]
                })
            },
            {
                test: /\.less$/,
                use:ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {loader: "css-loader"},
                        {loader: "postcss-loader"}, //加字首
                        {loader: "less-loader"}
                    ]
                })
            }
        ]
    }, //模組配置
...
}
複製程式碼

希望給css自動加上瀏覽器可以識別的字首則需要在postcss-loader中使用autoprefixer外掛。postcss-loader的使用需要在根目錄下建立postcss.config.js，配置如下：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
複製程式碼

重新啟動伺服器就會自動給css加上字首。

如果你還想把px轉換成rem，可以加上postcss-pxtorem外掛：

npm i postcss-pxtorem -D
複製程式碼

postcss.config.js配置如下：

const pxtorem = require('postcss-pxtorem');
module.exports = {
    plugins: [
        require('autoprefixer'),
        pxtorem({
            rootValue: 32, //根元素
            unitPrecision: 5, //保留小數位
            // selectorBlackList: ['van'], // 忽略轉換正則匹配項
            propList: ['*']
        })
    ]
}
複製程式碼

如果想要不把px變成rem，如邊框的1px，只需要將PX大寫即可。

完整配置檔案可以去git檢視webpack-config

相關文章