webpack打包Js文件

JavaScript010

webpack打包Js文件,第1张

a .

注意点:index.js就是需要打包的文件打包之后的文件会放到dist目录中, 名称叫做main.js

b .

这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中

其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外,

还可以通过配置文件的方式告诉webpack需要打包哪个文件

这句指令的含义是将webpack将index.js和他依赖的模块打包到一个文件中

其实webpack打包指令除了可以通知要打包哪些文件,还可以通过配置

2.2webpack常见配置

刚才是输入npx webpack index.js 那么现在就可以输入npx webpack了

如果想要使用其他指令,可以直接修改的 package.json 的scirpts

以后再打包的时候,就可以直接使用npm run test了;

当然,还可以看下devtool的取值,他生成的sourcemap映射表,对打包后的包的大小和打包速度有很大影响

方法:

1.首先在npmjs.org注册一个账号:(可省)

[root@~/wade/nodejs/pv-tj]# npm adduser

Username: billfeller

Password:

Email: (this IS public) [email protected]

[root@~/wade/nodejs/uv-tj]# npm publish

+ [email protected]

2. 通过npm adduser来注册新账号或登录老账号:

3. 在本地通过npm init完成相应的模块的开发,请注意在main文件中规范对外暴露的接口,注意,关于npm init的用法请参考之前的文章,这里不再详细说明:

基于express+redis快速实现实时在线用户数统计

4. 完成模块开发后就可以通过npm publish打包发布相应的程序包:

通过 命令行工具打包: webpack app.js bundle.js打包完成后会在同目录下生成bundle.js.

app.js: 入口文件

bundle.js: 打包好的文件。

通过amd规范定义的, 打包后会生成一个bundle.js 和 一个 1.bundle.js, 两个bundle.js 文件