2020/7/13 webpack学习

 

webpack概念：

       前端的一个项目构建工具，他是基于Node.js 开发出来的前端工具，借助它可以完美的实现资源的合并，打包，压缩，混淆等功能

wepack 安装：

全局安装：npm install webpack -g

步骤：

 npx webpack  经过webpack打包输出文件

 

配置好了快捷指令就可以直接的运行快捷指令

webpack --config webpack.config.js   ==  npm run build

配置服务器的开发依赖：

yarn add webpack-dev-server -D

 

npx webpack-dev-server 内存中打包生成  达=打包完成就可以用localhost访问

 

 

 

npm run build  是编译 webpack.config.js文件

 

 

将index.html文件压缩，因为webpack默认的是处理js模块

引入css文件 进行打包处理的时候会报错

 

所以设置load

load 执行顺序默认是从右向左 从上到下，所以右边是css.load 左边是style.load

安装指令：

 

自己在html里面的样式优先级没打包后的样式高  添加insertAt  (会报错已经不支持了)

 

处理less文件 就得修改下配置文件，并应该提前安装less-loader

安装指令 作用:由less-loader去将less转换

如果是sass，就yarn add sass sass-loader -D

 

因为只有一个入口文件，所以其他文件需要导入一下

 

yarn 与 npm区别：

yarn指令安装更快，他是同步安装所有任务，npm是一个个的安装

 

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    devServer: { //开发服务器的配置

        port: 3000, //可以修改端口号

        progress: true, //打包时候显示进度条

        contentBase: './dist', //刚进来的时候直接进入build2文件夹

        compress: true, //启动Gzip压缩



    },

    mode: "development",

    entry: './src/index.js', //出口 不是从改文件到

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: 'bundle.[hash:4].js' //打包后的文件名,每次build产生不同的文件 防止覆盖 加数字可以控制哈希戳的位数

    },

    plugins: [ //数组，放着所有webpack插件

        new HtmlWebpackPlugin({

            template: './src/index.html',

            filename: 'index.html', //打包后的文件

            minify: {

                removeAttributeQuotes: true, //去掉双引号

                collapseWhitespace: true, //将打包出来的html文件变成一行，也就是dist下面的index.html

            },

            hash: true,

        }),

        new MiniCssExtractPlugin({

            filename:'main.css'

        })

    ],

    module: {

        //模块

        rules: [ //规则  css-load   解析@import 这种语法 将多个css文件合并

            //       style-load 把css插入到head标签中

            //   多个load 需要数组 []



            // { test: /\.css$/, use: 'css-load'} 改为数组

            {

                test: /\.css$/,

                use: [{

                    loader: 'style-loader',

                    // options: {

                    //     insertAt: 'top'

                    // }

                }, 'css-loader']

            }, //以对象的形式写，可以多传点东西

            {

                test: /\.less$/,

                use: [{

                        loader: 'style-loader',

                        // options: {

                        //     insertAt: 'top'

                        // }

                    }, 'css-loader', //@import  解析@import

                    'less-loader' //把less->css       

                ]

            } //以对象的形式写，可以多传点东西

        ]

    }

}

 

抽离css文件

yarn add mini-css-extract-plugin -D 

导入插件

 

 

 

将css less文件里面的css抽离出来成为一个css文件，一个插件就是一个类，当然也可以多抽离出来几个类然后 为所有css抽离出一个main.css  所有less生成一个main1.css  或者抽离到一起也行

 

生成的mian.css就是所有的css less文件抽离出来的结果

 

自动给css样式加浏览器前缀

指令：

yarn add postcss-loader autoprefixer -D