webpack4.0使用

最新推荐文章于 2023-03-29 22:07:42 发布

qq_33761266

最新推荐文章于 2023-03-29 22:07:42 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack4.0

本文链接：https://blog.youkuaiyun.com/qq_33761266/article/details/86765691

webpack4.0 专栏收录该内容

8 篇文章

订阅专栏

下载webpack 和webpack-cli

	yarn add webpack webpack-cli -D

0配置打包文件npx webpack
运行npx webpack默认执行的配置文件为webpack.config.js 可以手动更改npx webpack --config webpack.myconfig.js

{
  "name": "webpack02",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.myconfig.js"
  }
}

webpack-dev-server 可以通过npx webpack-dev-server直接运行,默认开启一个8080端口,将代码生成到缓冲中

/*webpack 是node写出来的node的写法*/
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");//
console.log(path.resolve('dist'));//输出绝对路劲
module.exports = {
    devServer: {
        port: "3000",
        progress: true,//如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。
        contentBase: path.join(__dirname, "public"),//此处最好是绝对路径
    },
    mode: "development",//模式 默认两种模式 production development
    entry: "./src/index.js",//入口
    output: {
        filename: 'bundle.[hash:8].js',//打包后的文件名,[hash:8]生成8位的哈希戳
        path: path.resolve(__dirname, "dist"),//以当前目录下产生一个dist文件,必须是绝对路径
    },
    plugins: [//数组放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: "./src/index.html",//引入的路径
            filename: "index.html",//打包后的名字
            minify: {
                removeAttributeQuotes: true,//移除双引号
                collapseWhitespace: true,//移除空行
            },
            hash: true,//引用js加哈希戳
        })
    ],
    module: {//模块
        rules: [//规则 css-loader 接续@import这种语法
            //style-loader 他是把css插入到header的标签中
            //loader默认是从右向左执行['style-loader', 'css-loader']其中一种引入方法
            //loader还可以写成对象方式
            {
                //可以处理less文件
                test: /\.css$/, use: [{
                    loader: 'style-loader',
                    options: {
                        insertAt: 'top',//将css插入到顶部
                    }
                }, 'css-loader']
            },
            {
                //可以处理less文件
                // node-sass sass-loader
                //stylus stylus-loader
                test: /\.less$/, use: [{
                    loader: 'style-loader',
                    options: {
                        insertAt: 'top',//将css插入到顶部
                    }
                },
                    'css-loader',
                    'less-loader'//把less ->css
                ]
            },
        ]
    }
}