webpack3.x 配置
webpack3.x 主配置webpack.config.js文件，每个模块的详细信息都有一定的注释，如果有不对的地方，还请指教！
大纲：
1、创建package.json文件2、创建.babelrc文件3、创建webpack.config文件
目前3个文件即可,下面具体介绍：
一、基础配置
1、首先全局安装webpack
npm i webpack -g
在本地如果没有package.json
npm init
2、创建package.json
{
"name": "demo",
"version": "1.0.3",
"description": "EOI",
"main": "gulpfile.js",
"dependencies": {
"babel-preset-es2015": "^6.24.1",
"vue": "^2.4.4",
"vue-hot-reload-api": "^2.1.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.5",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.4.4",
"vue-touch": "^1.1.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.7",
"enhanced-resolve": "^3.4.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"gulp": "^3.9.1",
"gulp-imagemin": "^3.3.0",
"gulp-load-plugins": "^1.5.0",
"gulp-sftp": "^0.1.5",
"html-webpack-plugin": "^2.30.1",
"ip": "^1.1.5",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"path": "^0.12.7",
"react": "^16.0.0",
"style-loader": "^0.18.2",
"text-loader": "^0.0.1",
"url-loader": "^0.5.9",
"vue": "^2.4.4",
"vue-loader": "^13.0.5",
"vue-router": "^2.7.0",
"vuex": "^2.4.1",
"watchpack": "^1.4.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"xml-loader": "^1.2.1"
},
"scripts": {
"build": "set NODE_ENV=prod&&gulp imgMin --progress --colors",
"testBuild": "gulp TestBuild --progress --colors",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
"devTest": "gulp devTest",
"devDist": "set NODE_ENV=prod&&gulp devTest218 --progress --colors",
"devDistMainline3": "gulp devDistMainline3"
},
"author": "",
"license": "ISC",
"repository": {
"type": "git",
"url": "bai"
}
}上面是webpack、vue及其es6的转码安装的版本信息介绍。着重介绍下： package.json 文件中的scripts，这里边可以自己配置，表示启动node命令：比如说平时运行的：npm run build、npm run dev,npm run start 等等就是在这里配置的，同时也可以自定义，如果不明白啥意思：看这里 => 点我！
二、安装使用命令：(2种安装方法，任何一种都行)
1、简单方法：
复制上面的 package.json文件到你的工作目录，执行
npm install
即可，他会自动下载 package.json文件中的所有依赖包文件优点：省事儿方便，一条命令一部到位。
缺点：只会下载 package.json文件的指定版本，如果webpack有升级到3.x ++ 的话，就达不到你想要的效果了（我会时刻更新），如果这样，那么使用2的解决方案：2、可以使用 npm i vue webpack --save-dev
例如：
npm i --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-runtime clean-webpack-plugin css-loader enhanced-resolve extract-text-webpack-plugin file-loader html-webpack-plugin ip less less-loader path style-loader text-loader url-loader vue vue-loader vue-router vuex watchpack webpack webpack-dev-server xml-loaderPS：
1、如果npm不能使用的话，可以使用淘宝的镜像cnpm,进行操作
npm install -g cnpm –registry=https://registry.npm.taobao.org
2、如果是linux系统或者mac，前面可以加上sudo，以管理员去安装，部分插件写入系统是需要管理员权限的！
三、创建webpack.config.js文件
var webpack = require('webpack'),
path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
uglifyJsPlugin = webpack.optimize.UglifyJsPlugin,
ip = require('ip'),
CleanPlugin = require('clean-webpack-plugin');
console.log("======动态ip地址========= ：" + ip.address())
// 这个插件不在 Webpack 1.x 中，所以我们需要将这个文件复制到我们的项目里，webpack2.x则不需要
const HashedModuleIdsPlugin = require('./autopkg/HashedModuleIdsPlugin')
module.exports = {
entry: {
"babel-polyfill": "babel-polyfill", //用来解决IE9的兼容性
app: path.resolve(__dirname, '你的入口文件路劲地址 + "/app.js"),//项目的入口文件 app.js
vendor: ['vue', 'vue-router', 'vuex'],//公共模块的集合
},
output: {
path: path.resolve(__dirname, "./dist"),
publicPath: './', //这里必须是反斜杠且devServer.proxy.target必须存在，不然到时候index.html script src路劲会找不到
filename: 'assets/js/[name].js',
chunkFilename: "chunk/[name].chunk.js",
},
devServer: {
inline: true, //设置为true，代码有变化，浏览器端刷新。
open: true, //:在默认浏览器打开url(webpack-dev-server版本> 2.0)
port: "9000",//页面端口
compress: true, //使用gzip压缩
host: ip.address(),//ip地址，同时也可以设置成是localhost,
progress: true, //让编译的输出内容带有进度和颜色
historyApiFallback: true, //回退:支持历史API。
contentBase: "./", //本地服务器所加载的页面所在的目录
proxy: {
'*': {
target: 'http://127.0.0.1:80', //跨域Ip地址
secure: false
}
}
},
/* 该功能主要是给css 加上前缀，兼容
* 暂时不需要，因为加入该插件，会增加很多兼容性的样式，css代码量会成倍的增加
*/
/*postcss: [
require('autoprefixer') //调用autoprefixer插件
],*/
resolve: {
alias: {
//vue的配置
'vue': 'vue/dist/vue.min',
'vue-router': 'vue-router/dist/vue-router.min',
'vuex': 'vuex/dist/vuex.min',
//react的配置
'react': 'react/dist/react.min',
'react-dom': 'react-dom/dist/react-dom.min',
'redux': 'redux/dist/redux.min',
'react-redux': 'react-redux/dist/react-redux.min',
},
//extensions: ['','.js', '.less', '.css', '.vue', '.jsx'],//1.0的配置
extensions: ['.js', '.less', '.css', '.vue', '.jsx'],//2.0的配置
},
externals: {
},
module: {
// 解决动态js url警告错误 2017-05-03
unknownContextRegExp: /$^/,
unknownContextCritical: false,
// require(expr)
exprContextRegExp: /$^/,
exprContextCritical: false,
// require("prefix" + expr + "surfix")
wrappedContextRegExp: /$^/,
wrappedContextCritical: false,
// end
//vue1.0 leader是可以省略的 例如：loader: 'vue',，vue2.0 是不能省略的，例如： 例如：loader: 'vue-loader'
loaders: [{
test: /\.vue$/,
loader: 'vue-loader',
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}, {
test: /\.json$/,
loader: "json-loader"
}, {
test: /\.xml$/,
loader: "xml-loader"
}, {
test: /\.(css|less)$/,
loader: "style-loader!css-loader!less-loader"
}, {
test: /\.(png|jpg|jpeg|gif|icon|webp)$/,
loader: 'url-loader?limit=4192&name=assets/img/[name].[hash:5].[ext]'
}, {
test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
loader: "file-loader?&name=assets/fonts/[name].[ext]"
}, {
test: /\.txt$/,
loader: "text-loader"
},{
test: /\.jsx$/,
exclude: /node_modules/,
loaders: ['jsx-loader', 'babel-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "你的入口文件路劲地址" + '/index.html'
}),
new HashedModuleIdsPlugin(),
//用于合并代码，分模块更改进行打包优化，也就是说你更改这个模块，只打包这个模块，不影响你的公共文件---begin
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor'],
}),
//----------------------end----------------
new ExtractTextPlugin("assets/css/[name].[contenthash:5].css", {
allChunks: false /*是否将分散的css文件合并成一个文件*/
}),
new webpack.NoErrorsPlugin() //跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
]
};
if(process.env.NODE_ENV == "prod") {
//清空输出目录
module.exports.plugins.push(new CleanPlugin(["./dist"], {
"root": path.resolve(__dirname, ""),
verbose: true,
dry: false
}));
//代码压缩
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
}
})
);
} else {
//热加载插件
module.exports.plugins.push(new webpack.HotModuleReplacementPlugin());
}PS：介绍：
1、如果中途哪个模块出问题了，或者找不到了，直接使用npm i 模块名 --save-dev进行安装即可！
2、模块功能介绍：
webpack.config.js中的==devServer==的信息介绍：
--content-base <file/directory/url/port>：内容的基本路径。
--quiet：不要将任何东西输出到控制台。
--no-info：抑制无聊的信息。
--colors：向输出添加一些颜色。
--no-colors：不要在输出中使用颜色。
--compress：使用gzip压缩。
--host <hostname/ip>：主机名或IP。绑定到所有主机。0.0.0.0
--port <number>： 港口。
--inline：将webpack-dev-server运行时嵌入到包中。
--hot：添加并将HotModuleReplacementPlugin服务器切换到热模式。注意：确保不要再添加HotModuleReplacementPlugin两次。
--hot --inline还添加了webpack/hot/dev-server条目。
--public：覆盖--inline客户机模式下使用的主机和端口（对VM或Docker有用）。
--lazy：不看，根据要求进行编译（不能与之组合--hot）。
--https：通过HTTPS协议提供webpack-dev-server。包括在提供请求时使用的自签名证书。
--cert，--cacert，--key：路径的证书文件。
--open：在默认浏览器中打开url（对于webpack-dev-server版本> 2.0）。
--history-api-fallback：支持历史API后备。
--client-log-level：控制浏览器中显示的控制台日志消息。使用error，warning，info或none四、最后一步：建立.babelrc文件
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"build": {
"optional": ["optimisation", "minification"]
}
}
}五、完成
安装成功之后，就可以配置 ==webpack.config.js== 中的你的入口文件了！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
