webpack打包配置

    选择打赏方式

我写这篇文章一来是为了巩固自己的学习

二来是为了更多的同学在学习webpack中有所收获

webpack安装分为两种 一种是全局安装global

一种是局部安装local

我个人觉得我比较喜欢使用局部安装。不管然和插件

全局暗转只需要执行

npm install webpack webpack-cli -g

安装完成之后就可以是看到版本号了

webpack -v

本地安装命令一样不需要加-g

本地安装的同学大家使用webpack一定会报错 not fount webpack

因为我们没有全局安装所以在执行webpack的时候没有找到 很正常

原理很简单在termainal中执行webpack 的时候是全局的webpack

这个时候我们就可以使用npx webpack了

npx是执行局部的webpack

下面我们来看一看webpack如何使用

第一种方法是

直接执行npx webpack index.js

可以看到打包了一个js文件

第二种方法是配置一个webpack.config.js

里面的配置大家可以跟我一起写

我就不用代码高亮了,这个代码高亮的编辑器使用太麻烦。自己也懒得改

直接写了,写一句我会解释一句

const path = require('path')

这一句的意思是引入nodejs的path模块因为我们后面会使用到

module.exports = {

    mode: 'production', 

    这一句的意思是 告诉webpack我们要使用什么模式 有生产模式 和开发模式 分别为production and development

    entry: {

            main:  './src/index.js',

            sub: 'xxx.js'

    }

    这一句的意思是 告诉webpack 我们要从什么文件开始打包,我这里填写为src目录下面的index.js文件开始, 如果为对象即是打包多个文件的意思

    output: {

        这里面填写打包完成的文件放到什么地方

        filename: 'mian.js',

        这一句意思是打包完成后文件叫main.js

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

        这一句的意思是打包好的文件放到什么路径,我们这里填写dist目录下

    },

    module: {

        这里面是告诉webpack我们如何打包除了js以外的文件

        rules: [

            这里面填写相应的规则

            {

                test: /\.png$/,

                这一句的意思是要对png文件作出处理

                use: {

                    loader: 'file-loader',

                    这里是告诉webpack 我们要处理的png使用file-loader模块处理

                    name: '[hash]_[name].[ext]',

                    这里是告诉webpack 我们需要输出的名称

                    outputPath: 'images/',

                    这里我们告诉webpack我们这个文件要输出的地址                    

                }

            },

            {

                test: /\.scss/,

                这里设置sass文件打包设置

                use: [

                    'style-loader',

                    'css-loader',

                    'sass-loader',

                    'postcss-loader'

                    这个loader的意思是要将打包的css进行浏览器适配处理

                ]

            }

        ]

    },

    plugins: [

        new HtmlWebpackplugin([

            template: '/src/index.html'

            这里是设置模版文件

        ]),

        new CleanWebpackPlugin()

        这个插件是帮助我们自动清理打包目录的

    ]

}

版权声明:若无特殊注明,本文皆为《 张宇童 》原创,转载请保留文章出处。
本文链接:webpack打包配置 https://www.zyt8.cn/webpack/252.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗 胜利 不高兴 阴险 乖 酷 滑稽

评论信息框

吃奶的力气提交吐槽中...


既然没有吐槽,那就赶紧抢沙发吧!