【webpack新手指南】启动webpack的3种方式(版本4.35)

349 阅读1分钟
注意事项:

【01】如果是非全局安装的webpack,需要指定其在node_modules中的地址。

node_modules/.bin/webpack app/main.js public/bundle.js


【02】在webpack版本4后,必须全局安装webpack-cli,否则在项目中无法通过命令行启动webpack。



方式1:

在终端cmd——webpack+待编译的文件路径,可以配合参数。

比如:webpack entry.js bundle.js

entry.js在webpack.config.js文件的entry属性中。
bundle.js是编译后的文件。


webpack可以在终端cmd中使用:

webpack {entry file} {destination for bundled file}


{extry file}出填写入口文件的路径,比如main.js的路径。

{destination for bundled file}处填写打包文件的存放路径

填写路径的时候不用添加{}



使用命令行打包
可以看出webpack同时编译了main.js 和Greeter,js,现在打开index.html,可以看到如下结果



方式2:

可以配置webpack.config.js文件直接运行webpack。webpack.config.js是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。

注意,webpack.config.js的entry属性是什么js文件。

webpack启动的配置入口是entry:"file_url"。
比如:项目根目录/js/entry.js
那么entry:"./js/entry.js"
然后在cmd输出webpack即可。


03、通过运行一个或多个 npm scripts,会在本地node_modules目录中查找安装的webpack:
"scripts": {
    "start": "webpack --config webpack.config.js"
}

04、可以使用webpack --help看看一些运行的时候可选的参数。



方式3:

node.js API使用:
var webpack = require('webpack');
webpack({
//configuration
}, function(err, stats){});