9 Webpack 安装

最新推荐文章于 2024-04-23 13:38:32 发布

转载最新推荐文章于 2024-04-23 13:38:32 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.webpackjs.com/configuration/

Webpack 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍Webpack的安装步骤，包括Node.js和npm的初始化，以及如何通过npm全局和局部安装Webpack。此外，还提供了创建webpack.config.js文件的具体示例，演示了如何配置Webpack以适应开发环境，并介绍了使用npm脚本来简化打包流程的方法。

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