webpack进阶之插件篇
生活随笔
收集整理的這篇文章主要介紹了
webpack进阶之插件篇
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上一篇博客講解了webpack環境的基本，這一篇講解一些更深入的內容和開發技巧。基本環境搭建就不展開講了
一、插件篇
1. 自動補全css3前綴
autoprefixer
官方是這樣說的：Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
，也就是說它是一個自動檢測兼容性給各個瀏覽器加個內核前綴的插件。
舉個栗子：最新的彈性盒模型flux
實際代碼：
插件自動補充后
a {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex }效果顯而易見，我們可以更專注于css布局和美化，而不需要花過多的精力都寫相同的外碼而加上不同的前綴，也減少了冗余代碼。
使用方法:
cnpm install --save-dev autoprefixer postcss-loader
var autoprefixer = require('autoprefixer'); module.exports={//其他配置這里就不寫了module:{loaders:[{test:/\.css$/,//在原有基礎上加上一個postcss的loader就可以了loaders:['style-loader','css-loader','postcss-loader']}]},postcss:[autoprefixer({browsers:['last 2 versions']})]}2. 自動生成html插件
html-webpack-plugin
cnpm install html-webpack-plugin --save-dev
//webpack.config.jsvar HtmlWebpackPlugin = require('html-webpack-plugin');module.exports={entry:'./index.js',output:{path:__dirname+'/dist',filename:'bundle.js'}plugins:[new HtmlWebpackPlugin()]}作用:它會在dist目錄下自動生成一個index.html
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Webpack App</title></head><body><script src="bundle.js"></script></body> </html>其他配置參數:
{entry: 'index.js',output: {path: 'dist',filename: 'bundle.js'},plugins: [new HtmlWebpackPlugin({title: 'My App',filename: 'admin.html',template:'header.html',inject: 'body',favicon:'./images/favico.ico',minify:true,hash:true,cache:false,showErrors:false,"chunks": {"head": {"entry": "assets/head_bundle.js","css": [ "main.css" ]},xhtml:false})] } --- header.html --- <!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"/><title><%= htmlWebpackPlugin.options.title %></title></head><body></body> </html>作用：
title: 設置title的名字 filename: 設置這個html的文件名 template:要使用的模塊的路徑 inject: 把模板注入到哪個標簽后 'body', favicon: 給html添加一個favicon './images/favico.ico', minify:是否壓縮 {...} | false （最新api變動，原來是ture|false 感謝@onmi指正)hash:是否hash化 true false , cache:是否緩存, showErrors:是否顯示錯誤, chunks:目前沒太明白 xhtml:是否自動畢業標簽 默認false3. 提取樣式插件
extract-text-webpack-plugin
官網是這么解釋的Extract text from bundle into a file.,把額外的數據加到編譯好的文件中
var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = {module: {loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }]},plugins: [new HtmlWebpackPlugin({template: './src/public/index.html',inject: 'body'}),new ExtractTextPlugin("[name].[hash].css")] }說明：將css放到index.html的body上面
4. 拷貝資源插件
copy-webpack-plugin
官方這樣解釋 Copy files and directories in webpack,在webpack中拷貝文件和文件夾
cnpm install --save-dev copy-webpack-pluginnew CopyWebpackPlugin([{from: __dirname + '/src/public' }]),作用：把public 里面的內容全部拷貝到編譯目錄
| from | 定義要拷貝的源目錄 | from: __dirname + '/src/public' |
| to | 定義要烤盤膛的目標目錄 | from: __dirname + '/dist' |
| toType | file 或者 dir | 可選，默認是文件 |
| force | 強制覆蓋先前的插件 | 可選 默認false |
| context | 不知道作用 | 可選 默認 base context 可用 specific context |
| flatten | 只拷貝文件不管文件夾 | 默認是false |
| ignore | 忽略拷貝指定的文件 | 可以用模糊匹配 |
5. 全局掛載插件
webpack.ProvidePlugin [webpack內置插件 ]
new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","window.jQuery": "jquery" })) new webpack.NoErrorsPlugin(), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.CommonsChunkPlugin('common.js')作用: 和上面5個一一對應
當模塊使用這些變量的時候,wepback會自動加載。（區別于window掛載，感謝@lihuanghe121指正）不顯示錯誤插件查找相等或近似的模塊，避免在最終生成的文件中出現重復的模塊丑化js 混淆代碼而用提取公共代碼的插件二、一個完整的栗子
'use strict';// Modules var webpack = require('webpack'); var autoprefixer = require('autoprefixer'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var CopyWebpackPlugin = require('copy-webpack-plugin');/*** Env* Get npm lifecycle event to identify the environment*/ var ENV = process.env.npm_lifecycle_event; var isTest = ENV === 'test' || ENV === 'test-watch'; var isProd = ENV === 'build';module.exports = function makeWebpackConfig() {var config = {};config.entry = isTest ? {} : {app: './src/app/app.js'};config.output = isTest ? {} : {// Absolute output directorypath: __dirname + '/dist',publicPath: isProd ? '/' : 'http://localhost:8080/',filename: isProd ? '[name].[hash].js' : '[name].bundle.js',chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js'};if (isTest) {config.devtool = 'inline-source-map';} else if (isProd) {config.devtool = 'source-map';} else {config.devtool = 'eval-source-map';}config.module = {preLoaders: [],loaders: [{test: /\.js$/,loader: 'babel',exclude: /node_modules/}, {test: /\.css/,loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')}, {test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: 'file'}, {test: /\.json$/,loader: 'json'}, {test: /\.scss/,loader: 'style!css!sass'}, {test: /\.html$/,loader: 'raw'}]};if (isTest) {config.module.preLoaders.push({test: /\.js$/,exclude: [/node_modules/,/\.spec\.js$/],loader: 'isparta-instrumenter'})}config.postcss = [autoprefixer({browsers: ['last 2 version']})];config.plugins = [];if (!isTest) {config.plugins.push(new HtmlWebpackPlugin({template: './src/public/index.html',inject: 'body'}),new ExtractTextPlugin('[name].[hash].css', {disable: !isProd}))}if (isProd) {config.plugins.push(new webpack.NoErrorsPlugin(),new webpack.optimize.DedupePlugin(),new webpack.optimize.UglifyJsPlugin(),new CopyWebpackPlugin([{from: __dirname + '/src/public'}]),new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","window.jQuery": "jquery"}))}config.devServer = {contentBase: './src/public',stats: 'minimal'};return config; }();三、調試技巧
if (isTest) {config.devtool = 'inline-source-map'; }作用: 使用source-map可以在debug的時候看到源代碼，方便 查錯
總結
以上是生活随笔為你收集整理的webpack进阶之插件篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 干货分享！DevExpressv16.2
- 下一篇： 计算机桌面显示保护眼睛设置,电脑屏幕如何