消除未使用的CSS:安装PurifyCSS-webpack插件 cnpm i purifycss-webpack purify-css -D const glob = require('glob'); const PurifyCSSPlugin = require("purifycss-webpack"); plugins:[ new extractTextPlugin("css/index.css"), //这里的/css/index.css是分离后的路径位置 new PurifyCSSPlugin({ paths: glob.sync(path.join(__dirname, 'src/*.html')), }) ] 注明:这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。 使用这个插件必须配合extract-text-webpack-plugin这个插件。 ---------------------------------------------------------------------------------------------- Babel的安装与配置 cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react -D 注明:babel-preset-react(解析jsx语法的包vue可以不装) 配置: { test:/.(jsx|js)$/, use:{ loader:'babel-loader', options:{ presets:[ "es2015","react" ] } }, exclude:/node_modules/ } 虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项， 如果卸载webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置卸载.babelrc文件里。 ---------------------------------------------------------------------------------------------- .babelrc配置 { "presets":["react","es2015"] } loader配置可更改为: { test:/.(jsx|js)$/, use:{ loader:'babel-loader', }, exclude:/node_modules/ } 现在网络上已经不流行babel-preset-es2015官方推荐使用的是babel-preset-env cnpm install babel-preset-env -D { "presets":["react","env"] } 在实际工作中还是要安装Babel的，这样能更好的兼容每种浏览器，把Babel的配置文件分解出来是最好的选择。 ---------------------------------------------------------------------------------------------- 开发环境和测试环境的差异性 一个项目中是有开发环境和生产环境的，这两个环境的依赖也是不同的: 开发依赖：只在开发中用来帮助你进行开发，简化代码或者生成兼容设置的以来包。你可以打开package.json来查看，devDependencies的下面的这些包为开发使用的包。这些包在生产环境中并没有用处。 生产依赖：就是比如我们的js使用了jquery，jquery的程序要在浏览器端起作用，也就是说我们最终的程序也需要这个包，这就是生产依赖。这些包在dependencies中。
npm安装/cnpm安装(cnpm方便快捷求稳的话建议npm) 第一种： npm install jquery //不建议的安装方式 第二种：（-S是简写方式安装） npm install jquery --save //安装完成后，它存在于package.json的dependencies中，也就是说它是生产环境需要依赖的包（上线时需要的以来包）。 第三种：（-D是简写方式安装） npm install jquery --save-dev //安装完成后，它存在于package.json的devDependencies中，也就是说它是开发环境中需要的，上线并不需要这个包的依赖。 ---------------------------------------------------------------------------------------------- JS中的模块化实现 webpack模块 function gogo(){ alert('hello:'+'webpack'); } module.exports=gogo; 优雅打包第三方类库 ProvidePlugin是一个webpack自带的插件 plugins:[ new webpack.ProvidePlugin({ $:"jquery" }) ] BannerPlugin插件使用后会在JS中加上我们的版权或开发者声明 watch的配置:(在webpack.config.js中和入口出口同一个文件里面配置) watchOptions:{ //检测修改的时间，以毫秒为单位 poll:1000, //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作 aggregateTimeout:500, //不监听的目录 ignored:/node_modules/, } 后端与前端联调，我们不需要每一次都去打包，这样特别麻烦，我们希望的场景是，每次按保存键，webpack自动为我们打包。 ---------------------------------------------------------------------------------------------- 单个/多个第三方类库抽离 1、安装第三方类库如jq，vue，swiper等等 2、修改入口文件 entry:{ entry:'./src/main.js', jquery:'jquery', vue:'vue' }, 3、修改CommonsChunkPlugin配置 需要修改两个位置： 第一个是在name属性里把原来的字符串(单个第三方库)改为数组（多个第三方库），因为我们要引入多个模块，所以是数组； 第二个是在filename属性中把我们输出的文件名改为匹配付[name],这项操作就是打包出来的名字跟随我们打包前的模块。 单个第三方库配置: new webpack.optimize.CommonsChunkPlugin({ //name对应入口文件中的名字，我们起的是jQuery name:'jquery', //把文件打包到哪里，是一个路径 filename:"assets/js/jquery.min.js", //最小打包的文件模块数，这里直接写2就好 minChunks:2 }) 多个第三方库配置: new webpack.optimize.CommonsChunkPlugin({ //name对应入口文件中的名字，我们起的是jquery name:['jquery','vue'], //把文件打包到哪里，是一个路径 filename:"assets/js/[name].js", //最小打包的文件模块数，这里直接写2就好 minChunks:2 }) ---------------------------------------------------------------------------------------------- 静态资源集中输出（项目中没有引用的图片资源或者其他静态资源） 使用copy-webpack-plugin插件 cnpm install --save-dev copy-webpack-plugin 在webpack.config.js引入 const copyWebpackPlugin= require("copy-webpack-plugin"); 配置: new copyWebpackPlugin([{ from:__dirname+'/src/public', to:'./public' }]) from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。 to:要打包到的文件夹路径，跟随output配置中的目录。所以不需要再自己加__dirname。 new webpack.HotModuleReplacementPlugin()热更新插件就可以实现热加载