当前位置:网站首页 / 技术杂谈 / 正文

Webpack项目环境搭建

时间:2019年05月30日 | 作者 : 张端建 | 分类 : 技术杂谈 | 浏览: 126次 | 评论 0

首先:cmd进入项目目录,npm初始化(npm init)→cnpm | webpack -dev-server
安装完成后,新建webpack.config.js,这是webpack默认读取的配置文件。
首先要引进path

var path=require(‘path’);

因为有两个模块,入口文件要分别来写

entry:{
        admin:'./admin/index.js',
        consumer:'./consumer/index.js'
    },

出口文件

output:{
        //将打包后的文件放到dist目录
        path:path.resolve(__dirname,'dist'),
        // 让dist目录成为公共目录,在页面中可以script引用
        publicPath:'/dist',
        // [name]属性会读取entry里面的模块名,这样在dist中就会有两个打包好的文件
        filename: '[name].bundle.js'
    }

打包之后,发现bundle.js中有大量注释代码,占内存,怎么办?
去官网查找相应版本文档修改Webpack.config.js
如下:
Webpack项目环境搭建 技术杂谈 第1张
重新启动webpack,发现报错了。之后,我通过翻看官方文档发现是版本的问题,我看的是3版本的教程,项目中跑的是4.29.6版本,然后我进行了修改:
首先,安装uglifyjs-webpack-plugin:

$ npm install uglifyjs-webpack-plugin –save-dev

然后将插件添加到webpack配置中。例如:
webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};

然后重新运行webpack,已经成功压缩了。
Webpack项目环境搭建 技术杂谈 第2张

到这里webpack基础的配置已经完成了。

装载机


Webpack要识别css和图像等等,要安装对应的加载器。
以css为例:

1.npm install –save-dev css-loader
2.npm install –save-dev style-loader

webpack.config.js

module.exports = {
module: {
    rules: [{
    test: /\.css$/,
    use: ['style-loader','css-loader']
    }]
    },};

这样就可以打包css了。

小贴士:

图片→file-loader
Sass→sass-loader
Es6→babel-loader
Css→css-loader
Style→style-loader
url→url-loader(将图像变为base64编码)
node→node-argv

参数:

① Exclude:可以将打包工作限制在某个模块中,优化打包速度(放在rules中)
② NoParse:对某个模块不进行打包

Ex:noParse:[/iquery/];

使用装载机


有三种使用加载器的方法:
1、配置(推荐):在webpack.config.js文件中指定它们。
2、内联:在每个import语句中明确指定它们。
3、CLI:在shell命令中指定它们。

参考文档:

https://webpack.js.org/

推荐您阅读更多有关于“webpack环境,”的文章

请在这里放置你的在线分享代码

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。