Webpack 安装配置步骤

目录

• 安装配置步骤：

  1. 安装nodejs
  2. 全局安装webpack
  3. 建立项目，进入项目根目录
  4. 配置Webpack
  5. 在配置webpack-dev-server
  6. 添加css-loader style-loader 来支持css样式
  7. 添加url-loader file-loader来支持图片和其他静态文件
  8. 添加第三方库文件（jquery moment）
  9. 添加ES6 的支持

---

webpack的推广的缘由：web网站的复杂化，使得JS代码越来越多，浏览器提供的接口越来越丰富，越来越少的全页面重载。最终导致客户端代码越来越多，越来越难维护。所以angularJS、react、vue的这些代码组件化模块化的框架，在2016年极为流行，再加上ES6的推出。这导致，手动添加这些框架的依赖文件越来越复杂。所以使用webpack（模块打包机）能极好的处理这些依赖文件，管理整个项目的资源。

下面是webpack的安装步骤：
1.安装nodejs
nodejs下载路径：http://nodejs.cn/download/
我这的系统时windows的，这里就选择Window系统64位的版本：node-v8.1.3-x64.mis。下载完成后直接安装不用修改任何配置。等装好后，在任何一个文件下，按shit键+鼠标右键，然后选择“在此处打开powershell 窗口（s）”选项。在跳出的窗口里面输入 node -v,系统将会返回 node的版本号（我这是v6.11.0）。这样就代表nodejs 安装成功。
2.全局安装 webpack ，这里用npm指令安装。
指令：-g 表示全局的意思

 npm install -g webpack

在上一步的powershell 窗口，敲入上面的指令，然后按回车键。系统就会自动安装。
3.建立项目，进入项目根目录
在项目文件夹的根目录下，按shift+鼠标右键 调出poweshell 指令窗口。敲

npm init 回车

接着会要求你输入name的内容，如果不想输入，直接按回车键跳过。
version（版本）: 输入内容+按回车或者直接回车键跳过
description(项目描述): 输入内容+按回车或者直接回车键跳过
entry point:(index.js)输入内容+按回车或者直接回车键跳过
test command:)输入内容+按回车或者直接回车键跳过
git repository:
keywords:
author:
license:(ISC) 直接按回车键跳过

最后提示：
{
“name”: “excer-webpack”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”
},
“author”: “”,
“license”: “ISC”
}
Is this ok？（yes） 输入y+回车键
这样node就会在根目录下创建package.json文件，里面的内容就跟上面提示的一样。
4. 创建一个名为app的文件夹，里面新建2个js文件
sub.js

function generateText() {
    var element = docutment.createElement('h2');
    element.innerHTML = "Hello h2 world";
    return element;
}
module.exports = generateText;

index.js:

var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);

5.安装html-webpack-plugin插件，可以快速生成HTML文档
指令：

  npm install html-webpack-plugin --save-dev

–save: 自动把依赖关系写入package.json 文件的Dependencies。
–save-dev:写入的是devDependencies。
6.webpack.config.js 文件的配置
手动在根目录上新建一个webpack.config.js文件，根据需要添加所需的内容

var path = require('path');
var Htmlwebpackplugin = require('html-webpack-plugin'); //引入自动生成html的插件

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH,'app');
var BUILD_PATH = path.resolve(ROOT_PATH,'build');


module.exports = {
    //可以直接文件夹名称，默认会找index.js 也可以确定是哪个文件名字
    entry:APP_PATH,  
    //输出的文件名，合并以后的js会命名为buddle.js
    output:{
        path:BUILD_PATH,
        filename:'bundle.js' 
    },


    //添加自动生成的html的插件
    plugins: [
        new Htmlwebpackplugin({
            title:'Hello World app'
        })
    ],
};

在项目根目录下调出PowerShell, 运行webpack 指令

webpack

若报错：Error: Cannot find module ‘webpack/../../…..’

敲webpack的安装指令

npm install webpack

或者手动修改环境变量：我的电脑，右键-属性-高级系统属性-环境变量-系统变量-新建。

设置 变量名为：NODE_PATH 值:C:\Users\XXX\AppData\Roaming\npm\node_modules

运行里面敲cmd 在跳出的窗口敲path回车，在里边你就能看到：

C:\Users\XXX\AppData\Roaming\npm

NODE_PATH的值就是指向这个路径下的node_modules
6. webpack-dev-server
webpack-dev-server生成的包是放在内存中的。webpack支持两种模式自动刷新页面：
iframe模式（页面放在iframe中，当发生改变时重载）
inline模式（将webpack-dev-server 的客户端入口添加到包（bundle）中）
两种模式都支持热模块替换(Hot Module Replacement)热模块替换的好处是只替换更新的部分，不是页面重载。

inframe 模式 不需要额外配置，只需要URL格式访问即可

http://<host>:<port>/webpack-dev-server/<path>

inline模式的启动分两种情况：
1.命令行启动时需要添加–inline (–hot 热交换)，同时要在webpack.config.js中添加devServer:{inline：true}
具体如下：
指令：

npm install webpack-dev-server --save-dev

在webpack.config.js的添加相应的配置
var webpack=require(‘webpack’);
module.exports = {
…
devServer: {
historyApiFallback:true,
inline: true,//

}
}
在package.json文件下面scripts 模块添加：

"start": "webpack-dev-server --inline"

在powershell敲npm start 启动就相当于敲npm webpack-dev-server –inline 指令了。
如果要分离配置文件，也可以在这写：

"scripts":{
 "start":"webpack-dev-server --inline --hot --config webpack.config.dev.js"
}

这样在powershell敲npm start 启动，就会执行webpack.config.dev.js 文件。
更多配置参考：

2.Node.js Api 方式
需要手动将webpack-dev-server 客户配置到webpack打包的入口文件中(在webpack.json 里面的scripts 会指定 webpack.config.dev.js )。
修改webpack.config.dev.js

var webpack=require("webpack");
var webpackBase = require("./webpack.config.base.js");

var cfg = object.assign(webpackBase,{
devtool:"cheap-module-eval-source-map"
});
//entry
Object.getOwnPropertyNames((webpackBase.entry || {})).map(function (name) {
    cfg.entry[name] = []
          //添加支持热交换
          .concat("webpack/hot/dev-server")
        //添加webpack-dev-server客户端
        .concat("webpack-dev-server/client?http://localhost:9091")
        .concat(webpackBase.entry[name])
});

//plugins
cfg.plugins = (webpackBase.plugins || []).concat(
    new webpack.optimize.OccurrenceOrderPlugin(),
    //添加HMR插件
    new webpack.HotModuleReplacementPlugin(),//支持热交换的插件
    new webpack.NoErrorsPlugin()
)
module.exports = cfg;

录添加文件devServer.js ,用于创建服务器实例

var path = require("path");
var webpack = require("webpack");
var webpackDevServer = require("webpack-dev-server");
var webpackCfg = require("./webpack.config.dev.js");

var compiler = webpack(webpackCfg);

//init server
var app= new webpackDevServer(complier,{
//注意此处publicPath必填
publicPath:webpackCfg.ouput.publicPath,
hot:true //支持热交换
});
app.listen(9390, "localhost", function (err) {
    if (err) {
        console.log(err);
    }
});

console.log("listen at http://localhost:9390");

修改package.json中额scripts配置，通过执行devServer.js 文件启动服务器

"scripts":{
    "start":"node devServer.js"
}

重新运行npm start，浏览器访问http://localhost:9390即可，修改代码后保存，浏览器自动刷新

参考文档：
http://www.cnblogs.com/xuehaoyue/p/6410095.html
http://www.cnblogs.com/diaoxiong/p/5666652.html
https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine
http://www.cnblogs.com/hhhyaaon/p/5664002.html
https://segmentfault.com/a/1190000006964335