webpack常见的配置总结 ---只是一些常见的配置
早期的构建工具grunt ,gulp
帮助我们配置一些开发环境，省去一些我们调试和重复的工作
现在我们的构建工具一般是webpack ,目前建议大家用3.0以上的版本
现在市场上比较优秀的构建工具，个人认为有2个（大神有不同意的请不要喷我😝）
1-webpack
2-fls3
fls3是百度提供的前端构建工具，文档都是中文的，很方便入手，由于我使用vue习惯了
脚手架依赖webpack，所以个人一直使用webpack
- 安装
- 如果安装全局，可能会导致版本的差异，都安装到项目开发依赖中
，可以使每个人的版本统一
npm install webpack --save-dev
- 在package.json中配置脚本
scripts:{
"build":"webpack"
}
- 执行webpack
npm run build
- 在当前目录下新建一个webpack.config.js
- 名字一定是webpack.config.js，不能错，不能更改
- webpack是基于node语法
//引进一个node核心模块path let path=require('path'); module.exports={ //打包的入口 entry:"./src/main.js", //打包出口 output:{ filename:"bundle.js",//打包后的文件名 //path必须是绝对路径 //path.resolve将相对路径转绝对路径 path:path.resolve('./dist') //打包后文件的路径 } }
解析es6语法
- babel-core是babel的核心包，使用babel必须安装
- babel-loade是babel的翻译官，但是他没有语法
- 配置转换es5语法必须要让babel的翻译官有语法 babel-preset-es2015
安装上面的es6解析的包
npm install babel-core babel-loader babel-preset-es2015 --save-dev
配置模块部分转换es5语法
- 在当前目录下新建一个.babelrc文件
{
"presets": ["es2015"]
}
- 第二步在webpack.config.js中增加一个modlue配置
- 在modlue模块规则rules里配置一条js规则
//模块配置 module:{ //给模块配置规则 rules:[ { //匹配js,使用babel-loade，但不管node_modules目录下面的 //如果用到babel-loader，需要配置babelrc test:/|.js$/,use:'babel-loader', exclude:/node_modules/ } ] }
解析es7语法
- es2015 stage-3 stage-2 stage-1 stage-0(最高级)
- 先按照依赖包
npm install babel-preset-stage-0 --save-dev
- 在.babelrc文件下增加一个stage-0
{
"presets": ["es2015","stage-0"]
}
解析css 将css看成一个模块
npm install css-loader style-loader --save-dev
- 在webpack.config.js中模块module中规则rules里面增加一个css解析配置
{ //将css文件匹配到先解析css 再将css插入到style中，写法从右往左写 test:/\.css$/,use:['style-loader','css-loader'], exclude:/node_modules/ }
解析less文件
npm install less less-loader --save-dev
- 在webpack.config.js中模块module中规则rules里面增加一个less配置
{ //将css文件匹配到先解析css 再将css插入到style中，写法从右往左写 test:/\.less$/, //包依赖 use:['style-loader','css-loader','less-loader'], exclude:/node_modules/ }
解析图片 一般8k以下才解析base64
- 如果使用js引入图片，默认不会进行打包文件
- 如果是背景图片他会去打包
- 在js引用文件，要import 引入图片
- import img from './1.jpg'
npm install file-loader url-loader --save-dev
- 在webpack.config.js中模块module中规则rules里面增加一个图片配置
{ //将css文件匹配到先解析css 再将css插入到style中，写法从右往左写 test:/\.(png|jpg|gif|woff|svg|eot|woff2|ttf)$/, //包依赖 限制8K以上直接输出文件，以下的base64 // 8*1024 多少字节 use:'url-loader?limit=8192', exclude:/node_modules/ }
打包html以src下的html作为模板，将打包后的文件引入
npm install html-webpack-plugin --save-dev
npm run build
- 会执行输出实体文件，项目大时候，速度很慢
- 上线时候才npm run build
npm run dev
- 一般我们会在本地跑一个服务，当文件变化，刷新浏览器
npm install webpack-dev-server --save-dev
- 配置webpack里面的dev命令
"scripts": {
"dev":"webpack-dev-server --open"
},
webpack 基础包总结
npm install webpack babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 css-loader style-loader less-loader sass-loader less stylus-loader file-loader url-loader html-webpack-plugin webpack-dev-server --save-dev
总结就是安装各种各样的包,基础配置没有什么麻烦，后期也有脚手架，但是基础配置还是要知道一些
如果文章有帮助到您，请点右侧的推荐关注哈，O(∩_∩)O谢谢~ >>>>
谢谢大家 😁
