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: ['.*']            
    }        
  ]),
]


复制代码

转载于:https://juejin.im/post/5aa8c6b451882555712c0d6e