使用webpack打包脚本文件

使用webpack打包脚本文件

 

众所周知，webpack是一款很火的模块打包工具，它能静态的分析出模块之间的依赖情况，从对静态资源进行打包

1.首先，确认你的电脑已装好node和npm,安装过程这里就不做描述，可参考相关文档

 

2.新建一个文件夹，命名随意，在新建的文件夹中新建一个配置文件webpack.config.js

 

3.安装项目的依赖

进入这个目录，执行npm i -D webpack

i就是install的意思， -D就是- -save-dev

 

4.然后新建一个文件夹src, src中放的是源文件，新建 app.js作为入口文件，初始化我们的项目，执行npm init

生成package.json,例如：

注意若生成的package.json  无上图中第一个红框命令，手动添加此命令"dev": "webpack"

第二处若生成的为"Dependencies": {

    "webpack": "^3.8.1"

  },改为图中

"devDependencies":{

    "webpack": "^3.8.1"

  },

5. 更改webpack.config.js文件

新建一个dist文件夹，存放输出文件,修改我们的webpack.config.js

首先引入path

entry为入口文件

output为打包出口， filename打包好的文件叫什么名字，我们可以叫main.js

path打包到哪个地方,注意这块是绝对路径 dist/output  若无output文件夹打包时会自动创建

path.resolve(__dirname,'dist/output')

6.然后我们添加一些代码，新建文件夹 components ，在新建的文件夹中新建test.js

然后我们在app.js中引入这个文件

此时我们的目录结构为：

然后我们就可以对我们的脚本进行打包啦， 运行npm run dev

 

打包成功后，去我们的dist文件夹，就可以看到我们打包好的js文件啦