9 Webpack 安装

webpack的官网是 http://webpack.github.io/ ，

文档地址是 http://webpack.github.io/docs/

本序列教程出自Webpack中文文档，笔记在其基础上做了修改，如果修改详细文档请查阅官网

 

安装

首先要安装 Node.js， Node.js 自带了软件包管理器 npm

nodejs初始化

先执行npm init，按回车默认生成，其会生成一个package.json文件

 

用npm 安装webpack

-----------------------------------------------------------------------------------

//全局安装

$ npm install webpack -g

$ npm install webpack-cli --save-dev -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 查看相关指令

-----------------------------------------------------------------------------------

//局部安装

通常我们会将webpack安装到项目依赖，这样就可以使用本地版本的webpack

$ npm install webpack --save-dev

$ npm install webpack-cli --save-dev -g

-----------------------------------------------------------------------------------

// 如果我们从别人那里拷贝的package-lock.json（已安装的包记录）文件，那将他放到项目根目录下，执行以下命令会恢复包

$ npm install

 

项目目录下新建webpack.config.js文件，其内容如下

var path = require("path"); // 获取环境路径模块

var libPath = path.resolve('./src/lib');    // 获取保存第三方库（即模块）的路径

var nodeModPath = path.resolve(__dirname, './node_modules');    // 获取模块路径



module.exports = {

    // 开发环境

    devtool: 'source-map',

    mode: "development",

    entry: {

        account: __dirname + "/src/Account/account.jsx"

    },

    output: {

        path: __dirname + "/build",

        filename: "[name].bundle.js",

        chunkFilename: "[id].chunk.js"

    },

    plugins: [       //插件

    ],

    module: {

        rules: [

        ]

    },

    resolve: {

        extensions: ['.js', "*", ".css"],

        modules: [libPath, nodeModPath]     // 模块路径

    }

}

cmd下执行，生成打包文件（windows环境）

node_modules\.bin\webpack

 

npm脚本替换打包命令

编辑package.json文件：

{

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "node_modules/.bin/webpack"

  },

  ........

}

cmd下执行以下命令打包：

npm run build