Webpack配置详解（package.json/webpack.config.js详细配置 ）
webpack安装
package.json配置以及模块安装
webpack.config.js配置
开启webpack-dev-server服务
热替换插件的安装以及配置
开启自动打开浏览器插件的安装以及配置
加载器的安装以及配置
完整package.json/webpack.config.js文件
webpack安装
依赖于node.js环境安装
首先安装node.js环境，http://nodejs.org/zh-cn/download/ 或者http://nodejs.cn/download/ 下载node.js相应版本并安装（推荐安装稳定版）；
安装完成后，在命令小黑窗中node -v，检查版本号，有版本号，安装正确，否则重新安装；
继续检查npm -v，检查npm版本，有版本号则继续下一步；（也可以安装npm淘宝镜像cnpm，执行命令npm install -g cnpm --registry=https://registry.npm.taobao.org）
安装webpack模块
全局安装webpack模块，执行命令npm install webpack -g（简写：npm i webpack -g）,正确继续下一步；（安装较慢可以换用cnpm，下面npm均可替换cnpm）
继续执行npm install webpack --save-dev（简写：npm i webpack -D），表示在项目中安装webpack，并会在package.json中增加版本号，例"webpack": “^3.8.1”。
package.json配置以及模块安装
创建package.json文件
在小黑窗执行npm init，初始化项目文件，根据提示写入项目名称、版本、负责人、时间等等，执行结束后会在项目文件夹中生成package.json（也可以执行npm init -y，默认项目配置）；
package.json配置
在package.json文件 “scripts”中增加 “build”: “webpack --progress --colors”，后续执行命令npm run build使用；
package.json中模块安装
首先需要在全局环境下安装模块，之后在项目中安装模块。
例如安装Echarts模块，先执行npm i -g echarts，之后在项目中执行npm i echarts -D即可。
webpack.config.js配置
引入相应的模块
var path = require('path');
var webpack = require('webpack');
暴露模块
module.exports = {
entry: './index.js',//入口文件
//输出文件
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'bundle.js'
}
}
设置开启的端口号
//设置开发者工具的端口号,不设置则默认为8080端口
devServer: {
inline: false,
port: 8181
}
开启webpack-dev-server服务
安装webpack-dev-server依赖
在全局中安装npm i webpack-dev-server -g，之后在项目文件夹中安装npm i webpack-dev-server -D。
引入webpack-dev-server模块
在webpack.config.js文件中引入webpack-dev-server模块
var WebpackDevServer = require(‘webpack-dev-server’);
打开server服务
执行命令webpack-dev-server，浏览器手动输入http://localhost:8080 打开server服务即可成功开启服务。
或是执行命令webpack-dev-server --open，自动会在浏览器中打开http://localhost:8080 。前提是有一个 index.html 文件指向你的 bundle，且假设 output.filename 是 bunlde.js。
热替换插件的安装以及配置
安装依赖react-hot-loader（确保使用next版本）
执行命令npm i --save babel-loader react-hot-loader@next
定义用于热替换的入口路径
entry: {
main: [
// App 入口
"./app/index",
// 开启 React 代码的模块热替换(HMR)
'react-hot-loader/patch',
// 为 webpack-dev-server 的环境打包代码
// 然后连接到指定服务器域名与端口
'webpack-dev-server/client?http://localhost:9000',
// 为热替换(HMR)打包好代码
// only- 意味着只有成功更新运行代码才会执行热替换(HMR)
'webpack/hot/only-dev-server',
],
},
配置output
output: {
… …
// 对于热替换(HMR)是必须的，让 webpack 知道在哪里载入热更新的模块(chunk)
publicPath: “/”
},
配置module
使用 ES2015 模块使HMR正常工作，在es2015 preset设置中，将module选项设置为false。为此，需要引入react-hot-loader/babel 开启 React 代码的模块热替换(HMR)。
module: {
rules: [
{
// 语义解释器，将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法
test: /.jsx?$/,
include: path.resolve(__dirname, “app”),
exclude: /node_modules/,
// 应该应用的 loader，它相对上下文解析
// 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
// 查看 webpack 1 升级指南。
loader: "babel-loader",
// loader 的可选项
options: {
presets: [
// webpack 现在已经支持原生的 import 语句了, 并且将其运用在 tree-shaking 特性上
[
"es2015",
{
"modules": false
}
],
"react" // 转译 React 组件为 JavaScript 代码
],
plugins: [
"react-hot-loader/babel" // 开启 React 代码的模块热替换(HMR)
]
},
},
]
},
在webpack.config.js中模块暴露引入插件
plugins: [
// 开启全局的模块热替换(HMR)
new webpack.HotModuleReplacementPlugin()
]
在package.json中“scripts”定义start、dev
"start": "webpack-dev-server --hot --inline",
"dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base"
之后在小黑窗中执行npm start/npm run dev操作
开启自动打开浏览器插件的安装以及配置
安装OpenBrowserPlugin依赖
全局安装OpenBrowserPlugin依赖，执行命令npm i open-browser-webpack-plugin -g，在项目中执行命令 npm i open-browser-webpack-plugin -D
在webpack.config.js中plugins中配置
new OpenBrowserPlugin(
{
url: 'http://localhost:8080/echart_demo.html'
}
)
加载器的安装以及配置
安装css/sass/less loader加载器
npm install file-loader css-loader style-loader sass-loader ejs-loader html-loader jsx-loader image-webpack-loader --save-dev
加载器的配置
webpack.config.js配置：
module: {
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
完整package.json/webpack.config.js文件
结构目录
package.json文件
{
"name": "wxf",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot --inline",
"dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base",
"build": "webpack --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"echarts": "^3.7.2",
"open-browser-webpack-plugin": "0.0.5",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
},
"dependencies": {
"babel-loader": "^7.1.2",
"react-hot-loader": "^3.0.0"
}
}
webpack.config.js文件
var path = require('path');
var webpack = require('webpack');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var WebpackDevServer = require('webpack-dev-server');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'bundle.js'
},
//设置开发者工具的端口号,不设置则默认为8080端口
/*devServer: {
inline: false,
port: 8181
},*/
plugins: [
// 开启全局的模块热替换(HMR)
new webpack.HotModuleReplacementPlugin(),
new OpenBrowserPlugin(
{
url: 'http://localhost:8080/echart_demo.html'
}
)
],
module: {
loaders: [
{
test: /\.css$/,
loader: "style!css"
}
]
}
}