webpack的基本配置二

webpack 继续上一篇博客

1.webpack devServe
所以需要下载npm i webpack-dev-server -D
由于改变代码但是没有重新打包，如果重新更改代码，希望看到一个热更新的效果，所以有了webpack的devServe来自动打包，需要我们在webpack.config.js中去配置

 devServer:{
            // 项目构建后的路径
            contentBase:resolve(__dirname,'js/built.js'),
            // 启动gzip压缩,使代码体积更小运行速度更快
            compress:true,
            // 端口号
            port:3000,
            // 自动打开浏览器
            open:true
        }

启动devServer指令为:npx webpack serve
这篇博客为修改理由
2.开发环境基本配置

const {
    resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { Template } = require('webpack');
//resolve用来拼接绝对路径的方法
module.exports = {
    //webpack配置
    //入口文件 因为划分了目录结构，所以就是js文件夹下
    entry: "./src/js/index.js",
    // 输出
    output: {
        // 输出文件名
        // 但是希望src打包之后也有原来的结构，所以需要进行改动
        // 将main.js改动成js/main.js
        filename: 'js/main.js',
        // 输出路径
        // __dirname nodejs变量,代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build/build.js'),
        publicPath: './',
    },
    module: {
        rules: [
            //详细的node配置
            // 不同文件必须配置不同loader处理
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    // 并且不能复用
                    'less-loader'
                ],
            },
            {
                //匹配哪些文件
                test: /\.css$/,
                use: [
                    // use数组loader执行顺序,从下到上,从左到右,依次执行
                    //创建style标签,将js中的样式资源插入进行中,添加到head中
                    'style-loader',
                    // 将css文件中变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                ],
               
            },
            {
                test:/\.(jpg|png|gif)$/,
                // 如果使用use就是使用多个loader，但是我们这里就需要使用一个loader
                loader:'url-loader',
                // 需要下载url-loader和file-loader,因为url-loader依赖于file-loader
                options:{
                    // 图片大小小于8kb，就会被base64处理,就直接打包成base64的处理,直接在页面显示
                    // 优点：减少请求数量(减轻服务器压力)
                    // 缺点：图片体积会更大，文件请求会更慢一点
                    limit:8*1024,
                    // 问题：因为url-loader默任使用es6模块化解析,而html-loader引入图片是commenjs,所以解析时会报错
                    // 解决:关闭url-loader的es6模块化,使用commonjs解析
                    // esModule:false,
                    // [hash:10]去图片的hash的前十位
                    // [ext]取文件原来扩展名
                    // 将名字变小
                    name:'[hash:10].[ext]',
                    outputPath:'imgs'
                }
            },
            {
                test:/\.html$/,
                // html-loader是处理html文件的img图片的(负责引入img。从而能被url-loader进行处理)
                loader:'html-loader'
            },
            // 打包其他资源,就是除了css,html,js的资源
            {
                exclude:/\.(css|js|html|less|jpg|png|gif)/,
                loader:'url-loader',
                options:{
                    outputPath:'media'
                }
            }
        ]
    },
    //插件的配置
    plugins: 
        [
            //详细的plugins配置
            //html-webpack-plugin，引入html的plugin插件
            // 插件需要引入
            new HtmlWebpackPlugin(
               {
                //复制 ./src/index.html文件,并自动打包输出所有资源
                template:'./src/index.html'
               },
            )
        ],
    mode: 'development',
    // 开发服务器
    // 特点：只会在内存中编译打包,不会有任何输出
    // 启动devServer指令为:webpack-dev-server
    devServer:{
        // 项目构建后的路径
        contentBase:resolve(__dirname,'build/build.js'),
        // 启动gzip压缩,使代码体积更小运行速度更快
        compress:true,
        // 端口号
        port:3000,
        // 自动打开浏览器
        open:true
    }
}

webpack 会将打包结果输出出去
npx webpack serve 只会在内存中打包，没有输出

划分项目结构
将src中目录结构中因为css会先转化成js，所以就没有生成对应的css文件，因为已经引入到js中了，为了让项目结构更加清晰，所以可以指定每个打包文件的输出路径
例如
{ exclude:/\.(css|js|html|less|jpg|png|gif)/, loader:'url-loader', options:{ outputPath:'media' } }
在options里配置打包输出路径
项目结构如下

3.构建环境基本配置
development 能让代码本地调试运行的环境

production 让代码优化上线，代码压缩
4.css文件提取成单独文件
对生产环境搭建的第一步，对样式的处理

就是如上说过因为css会引入到js中，所以如果想要将css单独提取出来,就得下载插件 npm i mini-css-extract-plugin -D 可以将css提取到单独文件

所以需要在plugin的时候对插件做出相应的配置,在webpack.config.js中

plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            }),
            new MiniCssExtractPlugin(
                {   
                    // 打包好的输出的css
                    filename:'css/built.css'
                }
            )
        ],

 module: {
            rules: [{
                    test: /\.css$/,
                    use: [
                        // 创建style标签
                        // 'style-loader',
                        // 取代style-loader,提取css成单独文件
                        MiniCssExtractPlugin.loader,
                        // 将css文件整合到js文件中
                        'css-loader'
                    ]
                }],
        },

5.css兼容性处理
对css进行兼容性处理,需要postcss —>postcss-loader postcss-preset-env 识别浏览器
运行 npm i postcss-loader postcss-preset-env -D

默认是生产环境，如果要改动成开发环境，得设置环境变量 设置node环境变量:process.env.NODE_ENV = development

所以我们需要设置node.js的环境变量，在webpack.config.js中
process.env.NODE_ENV = development
在package.json中写入

"browserslist":{
    "development":[
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production":[
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

在css兼容性处理我这里报了一些错，暂时没找到解决办法。但是不看css兼容性处理的部分，还是可以正常运行的。
加油，一次解决css兼容性问题，继续webpack之旅