建立项目的webpack简单配置

2019年10月2日 223次阅读 来源: Sailing

实战项目中的 Webpack 配置：

说明：以下命令通过
Git Bash 执行

1.建立webpack-demo文件夹及npm初始化

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project
$ mkdir webpack-demo
    
Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project
$ cd webpack-demo/
    
Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ npm init

然后一路回撤，npm初始化成功，建立package.json，用于存放npm的相关信息（主要是安装模块信息）

2.安装 Webpack

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ npm install webpack --save-dev

3.建立项目所需文件夹

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ mkdir src

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ mkdir dist

然后Sublime打开”webpack-demo”，并新建 index.html, 引入一会打包后的 bundle.js 文件。
src下新建script和style文件夹，如下图所示：

《建立项目的webpack简单配置》

4.配置 webpack.config.js

官方文档地址：https://webpack.js.org/configuration/
根目录下新建 webpack.config.js文件，配置内容如下：
const path = require('path');
module.exports = {
    entry: './src/script/main.js', // 入口文件的配置项
    output:{ // 出口文件的配置项
        path: path.resolve(__dirname, 'dist/js'), // 打包的路径文职
        filename: 'bundle.js' // 打包的文件名称
    }
};

新建入口文件 main.js 及代码如下：

function helloWorld() {
    
}

Git Bash 运行以下命令

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ webpack

打包成功以后，在 dist下会多一个js文件夹，里边是打包后文件bundle.js.
最简单的 Webpack 打包配置完成。

    原文作者：Sailing
    原文地址: https://segmentfault.com/a/1190000012519442
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞