webpack基础配置

学习了下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