前端工程化解决方案webpack使用小结

　　前端工程化解决方案webpack，模块化、组件化、规范化、自动化，使得前端开发更加高效。

　　功能：代码压缩混淆、处理浏览器端js的兼容性、以模块化的方式处理项目中的资源

　　webpack插件：clean-webpack-plugin 清除dist文件夹之前打包生成的文件

　　使用步骤：先安装  再在webpack.config.js文件配置  导入构造函数  创建构造函数的实例对象  挂载 plugins 运行打包

　　注意点：entry:源js文件path   生成文件 output:[ path:  filename:'js/bundle.js']     js/目录打包时自动将js文件放在dist文件下js目录中，插件默认安装到devDependencies开发环境中

　　webpack插件：webpack-dev-server 使webpack监测源代码变化，自动进行打包构建

　　使用步骤：先安装  再在package.json文件配置 scripts{ dev :'webpack serve'} 运行打包

　　注意点：1、会启动一个http类型的实时打包的服务器

　　　　　　2、打包生成的文件默认放在内存中，不会进行代码压缩和性能优化

　　webpack插件：html-webpack-plugin 复制需要的文件到内存中，自动添加需要的样式　　

　　使用步骤：先安装  再在webpack.config.js文件配置  导入构造函数  创建构造函数的实例对象  挂载 plugins 运行打包

 

　注意点：构造函数实例对象{template:复制地址，filename:'文件名'}，插件默认安装到devDependencies开发环境中

插件devServer{host:主机名/域名，port:端口号,open：true 打包运行后是否自动打开浏览器}

加载器loader，webpack默认只能处理js文件，帮助webpack处理特定的文件模块

css-loader 处理加载css文件

使用：先安装，然后在webpack.config.js中配置module->rules[test:/\.css$/，user:['style-loader'，'css-loader']]

注意点：写法固定，执行顺序从后向前递进

less-loader 处理加载less文件

使用：先安装，然后在webpack.config.js中配置module->rules[test:/\.less$/，user:['style-loader'，'css-loader'，'less-loader']]

注意点：写法固定，执行顺序从后向前递进

url-loader 处理图片类型的文件

使用：先安装，然后在webpack.config.js中配置module->rules[test:/\.jpg|png|gif$/，user:'url-loader?limit=100&outputpath=images']

注意点：1、<=limit转换成base64类型的文件，大于不会转换，转换后体积变大，会缓存到内存中

　　　　2、outputpath dist打包文件中会将图片类型的文件默认放到images文件夹下

babel-loader 处理高级js语法的文件

使用：先安装，然后在webpack.config.js中配置module->rules[test:/\.js$/，user:'babel-loader' exclude:/node-modules],然后需要单独配置babel.config.js文件，module.exports{ plugins:[]}

注意点：需要添加exclude排除项，只对自己写的js代码转换，不对三方的js代码转换

webpack打包：开发环境下，打包默认存放在内存中，体积较大，未进行代码压缩和性能优化

webpack mode:develop  package->scripts->{dev:'webpack serve'，build:'webpack --mode production'}

SourceMap 是一个信息文件，里面存储位置信息

使用配置：webpack.config.js->devtool:eval-source-map 开发环境  devtool:nosources-source-map生产环境

注意点：生产环境下查看位置信息js文件不跳转到页面信息