一、插件篇
1. 自動補全css3前綴
autoprefixer
官方是這樣說的：Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website，也就是說它是一個自動檢測兼容性給各個瀏覽器加個內核前綴的插件。
舉個栗子：最新的彈性盒模型flux
實際代碼：
:fullscreen a { display: flex}插件自動補充后
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.js var 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>
作用：
3. 提取樣式插件
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-plugin
new 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個一一對應
二、一個完整的栗子
'use strict';// Modulesvar 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 directory path: __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的時候看到源代碼，方便 查錯
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
