webpack3.0配置

1. 安裝node、npm環境

2. 專案初始化

mkdir project
cd project
npm init
複製程式碼

3. 專案結構搭建

4. 安裝webpack到專案

npm install --save-dev webpack複製程式碼

5. 建立webpack配置檔案（webpack.config.js）

//webpack.config.js
    const path = require('path')
    const webpack = require('webpack')
    module.exports ={
        entry:{
            main:'./src/main.js',
        },
        output:{
            path:path.resolve(__dirname,'dist'),
            filename:'static/js/[name]-[hash].js'
        },
    }複製程式碼

6.本地服務端啟動

npm install webpack-dev-server@2.5.0 --save-dev
npm install --save cross-env

//package.json
"scripts": {    "dev": "cross-env NODE_ENV=development webpack-dev-server  --open --hot", 
"build": "cross-env NODE_ENV=production webpack -p"  },

//webpack.config.js
module.exports ={
    devServer:{   
         contentBase:"./dist",   
         port: 9000  
    }
}複製程式碼

7.根據模板動態生成Html

npm install html-webpack-plugin --save-dev

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins:[
    new HtmlWebpackPlugin({            
        filename:'index.html',            
        template:'./index.html',            
        chunks:['main'],
        minify: {                
            removeAttributeQuotes:true,                
            removeComments: true,                
            collapseWhitespace: true,                
            removeScriptTypeAttributes:true,                
            removeStyleLinkTypeAttributes:true            
        }        
    }),
    new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: false, } }),//js檔案壓縮
    new webpack.HotModuleReplacementPlugin(),//模板熱替換
]
複製程式碼

8.清除dist資料夾下面的重複檔案

npm install clean-webpack-plugin --save-dev//webpack.config.js

const cleanWebpackPlugin = require('clean-webpack-plugin');
if(process.env.NODE_ENV === 'production'){
    module.exports.plugins = (module.exports.plugins || []).concat([
        new cleanWebpackPlugin(
            ['dist'],
            {
                root:__dirname,
                verbose:true,
                dry:false
            }
        )
    ])
}複製程式碼

9.安裝loader

npm install --save-dev babel-core babel-loader babel-preset-env

npm install --save-dev css-loader style-loader postcss-loader  sass-loader

npm install --save-dev file-loader url-loader

建立.babelrc檔案
{    
    "presets": [         
        ["env",           
         {                 
            "targets": {                     
                "chrome": 52,                     
                "browsers": ["last 2 versions", "safari 7"]                 
            }             
          }        
        ]     
     ]
}

建立postcss.config.js檔案
module.exports = {    
    plugins:[       
         require('autoprefixer')   
    ]
}

//webpack.config.js
module.exports = {
  module:{        
    rules:[            
        {               
            test:/\.js$/,                
            loader:"babel-loader",                
            exclude:/node_nodules/            
        },            
        {                
            test:/\.scss$/,                
            use:extractCSS.extract([                    
                'css-loader',                    
                'postcss-loader',                    
                'sass-loader'                
            ])
         },            
         {                
            test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,                
            use:{                        
                loader:'url-loader',                        
                options: {                            
                    limit:10000,                            
                    name: '[hash].[ext]',                             
                    publicPath:'../images',                            
                    outputPath: 'static/images/',                        
                    //  useRelativePath:true                       
                 }                    
            }            
        },                    
     ]    
    },
}複製程式碼

10.安裝css單獨打包外掛

npm install extract-text-webpack-plugin --save-dev

//webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractCSS = new ExtractTextPlugin('static/styles/[name].css');

plugins:[
  extractCSS
]

複製程式碼

11.安裝複製靜態檔案到dist外掛

const CopyWebpackPlugin = require("copy-webpack-plugin")

plugins:[
  new CopyWebpackPlugin([            
    {              
        from: path.resolve(__dirname, './static'),              
        to: 'static',              
        ignore: ['.*']            
    }        
  ]),
]


複製程式碼