webpack3.6最新用法总结

webpack的几大模块

      如果说，一个webpack配置文件，我们到底需要配置的东西有什么？我觉得有这么几个重要的模块：entry（入口）、output（输出）、loaders、以及 plugins（插件）。

entry：代表入口。表示webpack从哪里开始解析你的项目依赖关系。

output：代表输出。表示webpack最终把你的项目打包到哪个文件中。

loaders：代表你用什么东西来解析你的各种文件。从原理上来说，webpack只认识js文件，其他文件需要通过各种loaders来实现解析。

plugins：代表你需要的一些其他的特殊功能。如js文件压缩插件-UglifyJsPlugin。

各个模块的使用语法以及配置方式

1、关于entry的使用
entry可以有字符串的配置方式，也可以由对象的配置方式,其中对象的配置方式可以由多个入口。

字符串的配置方式：

module.exports = {    entry:'./src/index.js'}

对象的配置方式（单入口）：

module.exports = {    entry:{        app:'./src/index.js'    }}

对象的配置方式（多入口）：

module.exports = {    entry:{        app:'./src/index.js',        vendor:'./src/vendor.js'    }}

2、output的使用
      output的使用和entry的使用相对应。有单个入口的写法，也有多个入口的写法（其中多个入口的写法兼容单个入口的写法，个人推荐使用第二种方式）。

单个入口的写法：

module.exports = {    output:{        filename:'bundle.js',        path:path.resolve(__dirname,'dist')    }}

多个入口的写法：

module.exports = {    output:{        filename:'[name].js',        path:path.resolve(__dirname,'dist')    }}

3、loaders写法
test代表一个正则匹配。
use代表使用什么样的loader解析。
include代表在哪个目录下工作。
exclude代表一定不解析某个目录和文件。

module:{   rules:[{       test:/\.(js|jsx)$/,       use:['babel-loader'],       include: path.resolve(__dirname, "src"),       exclude: /node_modules/   },{       test:/\.css$/,       include: path.resolve(__dirname, "src"),       use:[{loader:'style-loader'},{loader:'css-loader'}]   },{       test:/\.(png|jpg|gif|svg)$/,       include: path.resolve(__dirname, "src"),       use:['file-loader']   },{       test:/\.xml$/,       include: path.resolve(__dirname, "src"),       use:['xml-loader']   },{       test:/\.(csv|tsv)$/,       include: path.resolve(__dirname, "src"),       use:['csv-loader']   },{       test:/\.less$/,       include: path.resolve(__dirname, "src"),       use:['style-loader','css-loader','less-loader']   }]}

你不得不知的用法：devServer

devServer是在你本地开启一个简单功能的服务器。用于开发调试。
基本的使用方式：
npm install –save-dev webpack-dev-server

devServer: {    contentBase: path.join(__dirname,'dist'),    compress: true,    port: 8080,    hot: true},

contentBase：表示在哪一个目录下作为服务的启动目录。
port：表示本地服务的端口号是8080。
hot：代表是否进行热替换。
如果hot为true的话，需要配合插件 “uglify-webpack-plugin”。
npm install –save-dev uglify-webpack-plugin

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');const Plugin_UglifyJSPlugin = new UglifyJSPlugin();module.exports = {    plugins:[        Plugin_UglifyJSPlugin,    ]}

你不得不知的用法：精简输出

      精简输出主要是用于生产环境，在上线的时候，尽量让你的代码包更小，代码没有重复等等。

涉及到的插件有：UglifyJSPlugin 、DefinePlugin、CommonChunkPlugin 等。

1、UglifyJSPlugin：上面说到了这个插件，主要进行js文件的压缩。

//plugin5:UglifyJSPluginconst UglifyJSPlugin = require('uglifyjs-webpack-plugin');const Plugin_UglifyJSPlugin = new UglifyJSPlugin({    sourceMap: true});

2、DefinePlugin：这个插件主要让你分辨是开发环境还是准备上线环境。它在不同环境下加载的不同代码，生产环境下node自动加载针对用户的代码优化，开发环境下下自动加载额外log和日志。（细节下面会说到）

//plugin6:DefinePluginconst Plugin_DefinePlugin = new webpack.DefinePlugin({    'process.env':{        'NODE_ENV':JSON.stringify('production')    }});

3、CommonChunkPlugin：这个插件主要是针对公共代码提取。（细节下面会说到）

//plugin3:CommonChunkPluginconst Plugin_CommonChunkPlugin = new webpack.optimize.CommonsChunkPlugin({    name:'common'});

你不得不知的用法：devtool

      devtool的使用，个人觉得它最大的方便在于错误定位。

开发环境中，给这个属性设置 inline-source-map，能够把错误定位到你的编码的地方。如果不设置，它只会在生成的bundle.js中某一行报错。

devtool: 'inline-source-map'

你不得不知的用法：生产环境和v开发环境相分离

      一般而言，生产环境和开发环境是有很大的区别的。人们总是期望，在生产环境中，我的代码是被压缩的，并且是有hash生成的。在开发环境中，我们需要代码及时的跟新，希望有报错提示等等。

      所以，我们需要配置两套不同的webpack环境，来适应不同的需求。而这些需求，一般是用不同的插件来实现的。根据需求，开发环境一般需要这几个插件：HotModuleReplacementPlugin、DefinePlugin。而生产环境需要的插件是：UglifyJSPlugin、HashedModuleIdsPlugin。

      生产环境和开发环境使用的不同的webpack配置示例，本文最后给出。

你不得不知的用法：公用代码提取

      公共代码的提取，可以极大的提高代码质量，很多情况下，这也是提升编译速度的一种方式。其使用到的插件是：CommonChunkPlugin。

output:{        filename:'[name].[chunkhash].js',        path:path.resolve(__dirname,'dist'),        publicPath: "/",        chunkFilename: '[name].js'//公共部分提取的文件名    },    plugins:[        Plugin_CommonChunkPlugin,//公共部分提取    ],

关于自己配置的webpack以及package.json

1、webpack公共配置部分

webpack.common.js

/** * Created by mapbar_front on 2017/10/6. */const path = require('path');const webpack = require('webpack');//plugin1:HtmlWebpackPluginconst HtmlWebpackPlugin  = require('html-webpack-plugin');const Plugin_HtmlWebpackPlugin = new HtmlWebpackPlugin({    title: 'My App',    filename: 'index.html',    template: './src/assets/index.html'});//plugin2:CleanWebpackPluginconst CleanWebpackPlugin = require('clean-webpack-plugin');const Plugin_CleanWebpackPlugin = new CleanWebpackPlugin(['dist']);//plugin3:CommonChunkPluginconst Plugin_CommonChunkPlugin = new webpack.optimize.CommonsChunkPlugin({    name:'common'});//plugin3:CommonChunkPluginconst Plugin_CommonChunkPlugin2 = new webpack.optimize.CommonsChunkPlugin({    name:'vendor'});//configconst config = {    entry:{        app:__dirname + '/src/index.js',        vendor: ['react']    },    output:{        filename:'[name].[chunkhash].js',        path:path.resolve(__dirname,'dist'),        publicPath: "/",        chunkFilename: '[name].js'    },    plugins:[        Plugin_HtmlWebpackPlugin,//html模板插件        Plugin_CleanWebpackPlugin,//清除dist的插件        Plugin_CommonChunkPlugin2,//vendor提取        Plugin_CommonChunkPlugin,//公共部分提取    ],    module:{        rules:[{            test:/\.(js|jsx)$/,            use:['babel-loader'],            include: path.resolve(__dirname, "src"),            exclude: /node_modules/        },{            test:/\.css$/,            include: path.resolve(__dirname, "src"),            use:[{loader:'style-loader'},{loader:'css-loader'}]        },{            test:/\.(png|jpg|gif|svg)$/,            include: path.resolve(__dirname, "src"),            use:['file-loader']        },{            test:/\.xml$/,            include: path.resolve(__dirname, "src"),            use:['xml-loader']        },{            test:/\.(csv|tsv)$/,            include: path.resolve(__dirname, "src"),            use:['csv-loader']        },{            test:/\.less$/,            include: path.resolve(__dirname, "src"),            use:['style-loader','css-loader','less-loader']        }]    }};module.exports = config;

2、webpack生产环境配置部分

webpack.prod.js

/** * Created by mapbar_front on 2017/10/6. */const merge = require('webpack-merge');const common = require('./webpack.common');const webpack = require('webpack');const path = require('path');//plugin5:UglifyJSPluginconst UglifyJSPlugin = require('uglifyjs-webpack-plugin');const Plugin_UglifyJSPlugin = new UglifyJSPlugin({    sourceMap: true});//plugin6:DefinePluginconst Plugin_DefinePlugin = new webpack.DefinePlugin({    'process.env':{        'NODE_ENV':JSON.stringify('production')    }});//plugin7:const Plugin_HashedModuleIdsPlugin = new webpack.HashedModuleIdsPlugin()module.exports = merge(common,{    devtool: 'source-map',    plugins: [        Plugin_UglifyJSPlugin,//代码精简插件，未引用代码精简，代码压缩等。        Plugin_DefinePlugin,//不同环境下加载的不同代码，生产环境下node自动加载针对用户的代码优化，开发环境下下自动加载额外log和日志        Plugin_HashedModuleIdsPlugin,//基于模块id的hash解析    ]});

3、webpack开发环境配置部分

webpack.dev.js

/** * Created by mapbar_front on 2017/10/6. */const merge = require('webpack-merge');const common = require('./webpack.common');const webpack = require('webpack');const path = require('path');//plugin4:Hot Module Replacementconst Plugin_HMR = new webpack.HotModuleReplacementPlugin();//plugin6:DefinePluginconst Plugin_DefinePlugin = new webpack.DefinePlugin({    'process.env':{        'NODE_ENV':JSON.stringify('development')    }});module.exports = merge(common,{    devtool: 'inline-source-map',    devServer: {        contentBase: [path.join(__dirname,'dist'),path.join(__dirname,'public')],        compress: true,        port: 8080,        hot: true    },    plugins: [        Plugin_HMR,//热替换插件        Plugin_DefinePlugin,    ]});

4、关于webpack的package.json文件

package.json

{  "name": "webpack3_study",  "version": "1.0.0",  "description": "学习webpack3",  "main": "src/index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "webpack --config webpack.prod.js",    "watch": "webpack --watch --config webpack.dev.js",    "start": "webpack-dev-server --open --config webpack.dev.js",    "server": "node server.js"  },  "author": "mapbar_front",  "license": "ISC",  "devDependencies": {    "babel-core": "^6.26.0",    "babel-loader": "^7.1.2",    "clean-webpack-plugin": "^0.1.17",    "css-loader": "^0.28.7",    "csv-loader": "^2.1.1",    "express": "^4.16.1",    "file-loader": "^1.1.5",    "html-webpack-plugin": "^2.30.1",    "inline-source-map": "^0.6.2",    "less-loader": "^4.0.5",    "style-loader": "^0.19.0",    "ts-loader": "^2.3.7",    "uglifyjs-webpack-plugin": "^0.4.6",    "url-loader": "^0.6.2",    "webpack": "^3.6.0",    "webpack-dev-middleware": "^1.12.0",    "webpack-dev-server": "^2.9.1",    "webpack-merge": "^4.1.0",    "xml-loader": "^1.2.1"  },  "dependencies": {    "lodash": "^4.17.4",    "react": "^16.0.0"  }}

github地址

本文涉及webpack学习源码github地址：
https://github.com/liwudi/webpack3.6-.git