Webpack 入门教程

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。

一、安装node.js

 根据网上教程安装便可

二、安装webpack

npm install webpack --save-dev

三、建立项目文件目录

 建立文件夹test目录，建立js目录与文件main.js,

四、npm初始化

在项目文件夹中实例化npm。运行命令：

npm init

会生成文件夹 node_modules 与文件：package.json  、 package-lock.json

五、建立webpak配置文件

建立目录：dist ，打包后的js文件会生成到该目录

新建配置文件：webpack.config.js，打包时会自动识别配置文件，输入代码：

var path=require('path');
 
module.exports = {
　　entry: './js/main.js',
　　output: {
　　　　path: path.join(__dirname,'dist/js'),
　　　　filename: 'bundle.js'
　　},
 
};

 

六、运行打包命令

 在项目文件夹下执行命令：

webpack

会看到 dist 文件夹下生成 js 目录，和 bundle.js 文件

 

至此打包成功，新建 index.html 后，引入 js/bundle.js 能够看到代码执行成功。