Webpack配置详解（package.json/webpack.config.js详细配置 ）

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"
      }
    ]
  }
}