准备开始
webpack3.0 的安装
之前在很多网站上寻找webpack3.0的知识,但是结果都不理想。经过很多努力,终于学到了一些知识,现在把这些知识分享出来吧。(希望能对小伙伴有所帮助)
全局安装
1.jpg 2.jpg3.jpg 4.jpg
局部安装
5.jpg更新webpack
6.jpgwebpack.config.js基本介绍
const path=require('path');
module.exports={ //模块导出
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},//入口配置项
output:{
path:path.resolve(__dirname,'dist'),//会把一个路径或路径片段的序列解析为一个绝对路径。
filename:'[name].js'
},//出口配置项
module:{},//模块
plugins:[],//插件
devServer:{
contentBase:path.resolve(__dirname,'dist'),//热更新,基本目录结构
host:'10.117.44.130',//主机IP地址
compress:true,//服务器压缩参数,true(压缩),false
port:1717
},//开发服务
}
热更新
- 利用npm下载webpack-dev-server;
- 修改package.json;
-
启用热更新。(具体内容如下图所示)
7.jpg
8.jpg
9.jpg
打包CSS文件
-
用npm下载css-loader和style-loader: css-loader对CSS样式、标签进行处理,style-loader对CSS中的url进行处理。
-
webpack.config.js中的module:
module:{ rules:[ //规则 { test:/\.css$/, //用正则表达式来找到要处理的文件扩展名 use:['style-loader','css-loader'] //要用到的loader } ] },//模块`
-
知识扩展:
module:{ rules:[ //规则 { test:/\.css$/, //用正则表达式来找到要处理的文件扩展名 use:['style-loader','css-loader'] //这是第一种写法//要用到的loader //loader:['style-loader','css-loader'] //这是第二种写法 /*use:[{ loader:'style-loader' },{ loader:'css-loader' }]*/ //这是第三种写法(最常用) } ] },//模块
JS代码压缩
-
第一步:
const uglify=require('uglifyjs-webpack-plugin');//引入uglify.js
-
第二步:
plugins:[ new uglify() ],//插件
HTML文件打包
-
引入插件
const htmlPlugin=require('html-webpack-plugin');//需要安装
-
安装插件
npm install --save-dev html-webpack-plugin
持续更新中......
如果哪里有错误,欢迎小伙伴指正。--------------
意见反馈-邮箱:1521274537@qq.com
网友评论