续webpack一——一站到底
(7)webpack-dev-server 启动一个本地服务css
下载:npm i webpack-dev-server -g //全局安装 不在插件里 单独 devServer: { host:'localhost', port:4000, contentBase:_dirname + '/dev' } 固然也能够配置代理 proxy: { '/api':{ target: 'http://localhost', changeOrigin:true, pathRewrite: { '^/vip': '' } } }
(8)webpack.BannerPlugin 在文件头添加注释
(9)webpack.DefinePlugin 定义环境变量html
const webpack = require('webpack'); const NODE_ENV = process.env.NODE_ENV; // 从命令行环境获取 NODE_ENV 参数 module.exports = { plugins: [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify(NODE_ENV) } // 定义浏览器中的替换的变量为 `process.env.NODE_ENV` }) ] }
(10)可是若是打包完文件体积仍是太大怎么办呢?node
咱们能够用另一个插件CommonsChunkPlugin 设置: { entry: { bundle: 'app' vendor: ['app'] } plugins: { new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js') } } 可是页面必须引入 <script src="/build/vendor.js"></script> <script src="/build/bundle.js"></script>
(11) 分析打包后项目用到的各类包的大小 webpack-visualizer-pluginwebpack
var Visualizer = require('webpack-visualizer-plugin'); //... plugins: [new Visualizer({ filename: './statistics.html' })], //...
1.版本号控制web
下载htmlwebpackplugin插件 getPath('[name]@[chunkhash:6].css') css 和 js 多 chrunk // 生成抽离文本文件插件的实例 new ExtractTextPlugin({ filename: (getPath)=>{ return getPath('[name]@[chunkhash:6].css').replace('scripts', 'styles') }, allChunks: true }),
2.devtool: 'source-map' 源码映射 方便开发时调试代码
3.环境变量配置(mac)npm
设置: >cd ~/.profile >node >process.env 出去 >export NODE_ENV=production //配置环境变量 //查看 >node >process.env.NODE_ENV => 'production' window下是 set NODE_ENV=production 而后在package.json下 “script”: { "dev": "export NODE_ENV=dev && webpack && webpack-dev-server", "build": "export NODE_ENV=prod && webpack" } 而后在config.js中针对环境进行判断 打包
npm i webpack -g
webpack.config.js,同gulpfile.js和Gruntfile.js同样,就是配置项
// 引入webpack var webpack = require('webpack') // 引入文本抽离插件 var ExtractTextPlugin = require('extract-text-webpack-plugin') // 引入html生成插件 var HtmlWebpackPlugin = require('html-webpack-plugin') // 引入openBrowser 插件 var OpenBrowserPlugin = require('open-browser-webpack-plugin') var outputDir = '' if (process.env.NODE_ENV === 'dev') { outputDir = '/dev' } else { outputDir = '/prod' } var public = { // 配置入口 entry: { 'scripts/app': './src/scripts/app.js', 'scripts/search': './src/scripts/search.js' }, // 配置出口 output: { filename: '[name]@[chunkhash:6].js', path: __dirname + outputDir // 必须是绝对路径 }, // devtool 配置 devtool: 'source-map', // 配置模块 module: { rules: [ // 解析ES6+ { test: /\.js$/, exclude: /node_modules/, // 排除node_modules下.js的解析 use: [ { loader: 'babel-loader' // 应用babel-loader解析ES6+ } ] }, // 加载scss { test: /\.scss$/, use: //[ // { loader: 'style-loader' }, // { loader: 'css-loader' }, // { loader: 'sass-loader' } //] // CSS抽离 ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }, // 加载css { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] }, // 加载图片 { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 1000, name: 'media/images/[name].[hash:7].[ext]' } }, // 加载媒体文件 { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'media/mp4/[name].[hash:7].[ext]' } }, // 加载iconfont { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'media/iconfont/[name].[hash:7].[ext]' } } ] }, // 配置插件 plugins: [ // 生成抽离文本文件插件的实例 new ExtractTextPlugin({ filename: (getPath)=>{ return getPath('[name]@[chunkhash:6].css').replace('scripts', 'styles') }, allChunks: true }), // 生成编译HTML(index.html)的插件的实例 new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', chunks: ['scripts/app'] }), // 生成编译HTML(search.html)的插件的实例 new HtmlWebpackPlugin({ template: './src/search.html', filename: 'search.html', chunks: ['scripts/search'] }), // 代码压缩 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, output: { comments: false } }), // 自动在打开浏览器打开页面 // new OpenBrowserPlugin({ // url: 'http://localhost:4000' // }) ] } var devserver = { // 配置webserver devServer: { host: 'localhost', port: 4000, contentBase: __dirname + outputDir, noInfo: true, proxy: { '/api': { target: 'https://api.douban.com/', changeOrigin: true, pathRewrite: { '^/api': '' } }, '/vip': { target: 'http://localhost:9000/', changeOrigin: true, pathRewrite: { '^/vip': '' } } } } } if (process.env.NODE_ENV === 'dev') { module.exports = Object.assign({}, public, devserver) } else { module.exports = public }
webpack1到webpack3的时候 loader加载格式更改 style-loader必须写到fallback属性上,版本1的时候直接loader:"style-loader!css-loader" 但愿对你们有帮助!