webpack，用起來利器，學起來懵*，還變的快~~~ 做筆記，加深記憶。

作用：

• 代碼轉化
  
• 文件壓縮
  
• 代碼分割
  
• 自動刷新
  
• 代碼校驗
  

核心概念：

• entry：入口
  
• module：模塊，webpack從entry開始，遞歸找出所有依賴的模塊
  
• chunk：代碼塊。
• loader：模塊轉化配置。 將原內容按配置轉化
• plugin：擴展插件
• output：輸出結果

webpack啟動后，從entry里配置的module開始遞歸解析entry依賴的所有module，再根據配置的loader對module進行轉換。

一個entry和其所依賴的module組成一個chunk代碼塊。

單頁面SPA入口：

module.exports = {entry: './main.js' }復制代碼

多頁面MPA入口：

entry: {home: "./home.js",about: "./about.js",contact: "./contact.js" }復制代碼

輸出

• path：輸出位置。eg：path: path.join(__dirname, '../dist')
• publicPath：針對打包后，靜態文件的位置
• filename：定義每個輸出bundle的名稱。

filename: "bundle.js" filename: "[name].bundle.js" filename: "[id].bundle.js" filename: "[name].[hash].bundle.js" filename: "[chunkhash].bundle.js" 復制代碼

module模塊

處理不同模塊，主要在rules中

module: {rules: [{test: /\.(vue|js|jsx)$/, //處理對象，一般用正則標識文件后綴loader: 'eslint-loader', //處理方案，不同的loaderexclude: /node_modules/, //規則忽略文件enforce: "pre" //預處理},{test: /\.vue$/,loader: 'vue-loader',options: createVueLoaderOptions(isDev) //option-loader的選項},...{test: /\.css$/,use: [ //loader集合'style-loader','css-loader']},{test: /\.(gif|jpg|jpeg|png|svg)$/,use: [{ //use是useEntry(loader和他的option)的集合loader: 'url-loader',options: {limit: 1024,name: 'resources/[path][name].[hash:8].[ext]'}}]},] }復制代碼

resolve

引入模塊時，可以不用擴展名

alias: //用的多的就是

resolve: {//引入模塊的時候，可以不用擴展名 extensions: [".js", ".less", ".json"],alias: { //別名"@": "./src/"}},復制代碼
----------------------------------------------------------------------------------------

這貨的知識太雜了，記一個實際項目搭建中的用到的。

webpack.config.base.js //放置完全公共的東西

const path = require('path') const createVueLoaderOptions = require('./vue-loader.config')const isDev = process.env.NODE_ENV === 'development'const config = {//mode: process.env.NODE_ENV || 'production',target: "web",entry: path.join(__dirname, '../client/index.js'),output: {filename: 'bundle.[hash:8].js',path: path.join(__dirname, '../dist'),publicPath: "http://127.0.0.1:8000/public/"},module: {rules: [{test: /\.(vue|js|jsx)$/,loader: 'eslint-loader', //代碼格式檢測exclude: /node_modules/, //exclude不用打包enforce: "pre" //加入，預處理，不會和真正的預處理文件沖突},{test: /\.vue$/,loader: 'vue-loader',options: createVueLoaderOptions(isDev) //使用vue-loader，配置單獨打包css文件},{test: /\.jsx$/,loader: 'babel-loader'},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/ //exclude不用打包},{test: /\.css$/,use: ['style-loader','css-loader']},{test: /\.(gif|jpg|jpeg|png|svg)$/,use: [{loader: 'url-loader',options: {limit: 1024,name: 'resources/[path][name].[hash:8].[ext]' //靜態文件歸并位置,[name][path]配置過程中,都可以取到 [hash:8] hash值取8位 }}]},]} }module.exports = config 復制代碼

webpack.config.client.js

const path = require('path') const HTMLPlugin = require('html-webpack-plugin') const webpack = require('webpack') const merge = require('webpack-merge') //Merge合并參數 const ExtractPlugin = require('extract-text-webpack-plugin') //把css單獨打包到一個文件中 const baseConfig = require('./webpack.config.base') const VueClientPlugin = require('vue-server-renderer/client-plugin')const isDev = process.env.NODE_ENV === 'development'const defaultPlugins = [new webpack.DefinePlugin({'process.env': {NODE_ENV: isDev ? '"development"' : '"production"'}}),new HTMLPlugin({template: path.join(__dirname, 'template.html')}),new VueClientPlugin() ]const devServer = {port: '8000',host: '0.0.0.0',overlay: {errors: true,},hot: true,headers: {'Access-Control-Allow-Origin': '*'},historyApiFallback: {index: '/public/index.html'}//open: true }let configif (isDev) {config = merge(baseConfig, {devtool: '#cheap-module-eval-source-map',module: {rules: [{test: /\.styl/,use: ['vue-style-loader', //vue開發的時候，熱更替功能，使用vue-style-loader'css-loader',{loader: 'postcss-loader',options: {sourceMap: true}},'stylus-loader']}]},devServer,plugins: defaultPlugins.concat([new webpack.HotModuleReplacementPlugin(),new webpack.NoEmitOnErrorsPlugin()])}) } else {config = merge(baseConfig, {entry: { //蓋掉base.config.js中的配置app: path.join(__dirname, '../client/index.js'),vendor: ['vue']},output: {filename: '[name].[chunkhash:8].js' //},module: {rules: [{test: /\.styl/,use: ExtractPlugin.extract({ //vue開發的時候,用熱更替的功能，使用vue-style-loaderfallback: 'style-loader',use: ['css-loader',{loader: 'postcss-loader',options: {sourceMap: true}},'stylus-loader']})}]},/*optimization: {splitChunks: {chunks: 'all'},runtimeChunk: true},*/plugins: defaultPlugins.concat([new ExtractPlugin('style.[contentHash:8].css'), //ExtractPlugin把css單獨打包到一個css文件里面new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),new webpack.optimize.CommonsChunkPlugin({name: 'runtime'})]),}) } module.exports = config 復制代碼

• css-loader 將CSS變成JS //
  
• style-loader將JS樣式插入head //js樣式由css-loader生成,
  
• extractTextPlugin // 將CSS從JS中提取出來
  
• css module //解決css命名沖突的問題
• less-loader sass-loader
• postcss-loader //PostCSS處理，做解析

html-webpack-plugin ? ? ? ? ? ? ? ?生成html頁面文件， 一般多頁面時候用

extractTextPlugin ? ? ?抽取文本，

uglifyjsplugin ? ? ? ? ? ? ? ? ? ? ? ? ? ? 合并壓縮

commonsChunkPlugin ? ? ? ? ? ? ? 抽取公用模塊 ?，多頁面時候用的多

clean-webpack-plugin? ? ? ? ? ? ? ? 清除文件 ?打包文件之前

copy-webpack-plugin ? ? ? ? ? ? ? ? 文件復制

postcss:[require('autoprefixer'){browsers:['late 5 versions']} ] 復制代碼

webpack常用的loader

樣式：style-loader、css-loader、less-loader、sass-loader等

文件：raw-loader、file-loader 、url-loader等

編譯：babel-loader、coffee-loader 、ts-loader等

校驗測試：mocha-loader、jshint-loader 、eslint-loader等

---------------------------------------------------------------------------

最后

parcel，了解一下。

小而美，費不著的時候，就別折騰web胖了。

總結

以上是生活随笔為你收集整理的webpack----常规配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。