什么是webpack?
webpack是一个模块管理工具，用webpack可以管理模块依赖，并编译模块所需的静态文件。它可以很好的管理打包开发中用到的html、css、js以及静态文件（图片，字体），使开发更有效率。
webpack对不同的类型资源，有对应的模块加载器（loader）。
webpack模块打包器会分析模块间的依赖关系，最后生成优化且合并后的静态资源。
webpack是以CommonJs规范书写代码，但是对CMD/AMD也支持。
webpack工作流程：
1.通过entry配置入口文件；（如果多个入口文件，用对象形式表示）
2.通过output配置出口文件；
entry:'./src/index.js',//入口
output:{//出口
filename:'bundle.js',//打包后的文件名
//filename:'bundle.[hash:8].js', //如果希望文件每次生成的新的不一样文件 也可以加hash戳 在中间加入[hash] ：8的意思是只显示8位
path:path.resolve('build'),//路径必须是一个绝对路径
},
3.使用各种loader处理css、js、image等资源，并将它们编译与打包成浏览器可以解析的内容。
安装webpack
- 安装本地的webpack
- npm init (先初始化)
- npm install wepack webpack-cli -D //-D是 --save-dev缩写
webpack可以进行0配置
-
打包工具->输出后的结果（js模块）
-
打包src文件夹下的
-
npx webpack
-
打包后会出现一个dist文件
-
打包（支持我们JS 的模块化）
手动配置webpack
- 默认配置文件的名字是 webpack.config.js
- 如果更改配置文件的名字 如webpack.config.my.js
- 运行命令行为 npx webpack --config webpack.config.my.js -D
需要在package.json文件增加scripts，里面放入build
"scripts": {
"build": "webpack --config xxx",(xxx为新的名字)
}, - 运行命令行为 npm run build
- 如果把build里面 名字去掉 只留下webpack，此时运行 npm run build -- --config xxx （中间--不要省略 否则会报错）
开发时想用ip地址来访问，webpack内置了一个开发服务，是通过express实现了一个静态服务。
-
npm install webpack-dev-server -D
-
执行 npx webpack-dev-server
-
也可以配置packge.json 中scripts
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
}, -
执行命令行 npm run dev
(好处是并不会真是的打包文件，而是在生成的内存中打包) -
如果想在当前目录下执行，需要在webpack.config.js里进行配置
devServer:{//开发服务器的配置
port:3000,//设置的端口号
progress:true,//是否有进度条
contentBase:'./build',//指定的目录名运行
compress:true//启动UglifyJsPlugin压缩
},
想要自动建立html 然后打包在内存中，就需要插件 html-webpack-plugin
- 运动命令行 npm install html-webpack-plugin -D
- 然后在webpack.config.js进行配置
plugins:[//是一个数组，放着所有的webpack插件
new HtmlWebpackPlugin({//自动生成打包后的HTML模板插件类
template:"./src/index.html",//模板
filename:'index.html',
minify:{//压缩html文件
removeAttributeQuotes:true,//删除双引号
collapseWhitespace:true//压缩成一行
},
hash:true, //插入的js文件带hash戳,为了缓存问题
})
]
(记住每次先npm run build打包 然后在npm run dev运行)
处理css
在js里引入css模块，需要把css变成模块然后在js中引入 需要合适的loader解析文件
-
npm install css-loader style-loader -D
-
css-loader 是解析
-
也可以处理less文件 sass stylus node-sass sass-loader stylus stylus-loader
-
配置webpack.config.js
module:{
rules:[//规则解析
//css-loader解析@import这种语法
//style-loader 是将css插入到head标签中
//loader的特点，希望单一
//loader的用法，字符串只用一个loader,如果多个loader需要[]
//loader的顺序是 默认从右向左执行,从下到上执行
//loader可以写成对象方式
{test:/\.css$/,use:
[
{
loader:'style-loader',
options:{//配置指向
insertAt:'top'//让css插入在最上面
}
},
'css-loader'
]
},//匹配正则，配置后缀为.css的文件
//可以处理less文件 sass stylus node-sass sass-loader stylus stylus-loader
{test:/\.less$/,use:
[
{
loader:'style-loader',
},
'css-loader',
'less-loader'//把less=》css
]
}
]
}//配置模块
如果把css抽离 用link标签插入需要插件 mini-css-extract-plugin
- npm install mini-css-extract-plugin -D
css样式自动加前缀 需要安装插件 postcss-loader
-
npm install postcss-loader antuprefixer -D
-
在webpack.config.js的配置模块里 加入‘postcss-loader’
-
需要创建一个postcss.config.js的配置文件
module.exports = {
plugins:[require('autoprefixer')]
}
压缩css文件，需要安装插件 optimize-css-assets-webpack-plugin
let OptCssAssets=require('optimize-css-assets-webpack-plugin');//压缩css文件
module.exports = {
optimization:{//优化项
minimizer:[
new OptCssAssets()
]
},
}
将高级语法转换成es5
es6转换成es5 安装babel
- 需要安装转换loader babel-loader @babel/core @babel/preset-env
- 运行命令行 npm install babel-loader @babel/core @babel/preset-env -D
- 配置webpack.config.js，在module里的rules配置规则
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{//用babel-loader需要把es6转换成es5
presets:[//预设
'@babel/preset-env'
]
}
}
},
如果出现es7语法，class类 需要安装@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
- 在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文件多的时候，项目就会很大。
- babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样做能减小项目文件的大小。
Polyfill提供的就是一个这样功能的补充，实现了Array、Object等上的新方法，实现了Promise、Symbol这样的新Class等
网友评论