webpack4.x开发环境配置详解(2)

这表明webpack4.x是以项目根目录下的'./src'作为入口,但我们的项目中缺乏该路径,因此我们在根目录下创建src文件夹,事实上webpack4.x'./src/index.js'作为入口,单单创建src文件而没有index.js文件仍然会报错,因此我们

hello.js移动到'./src',并重命名为index.js

现在如果我们再次执行

webpack index.js bundle.js

会提示can.t resolve相关的错误。

原因是,webpack4.x的打包已经不能用webpack 文件a 文件b的方式,而是直接运行webpack --mode development或者webpack --mode production,这样便会默认进行打包,入口文件是'./src/index.js',输出路径是'./dist/main.js',其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。

因此我们不再按webpack 文件a 文件b的方式运行webpack指令,而是直接运行

webpack --mode development

或者

webpack --mode production

这样便能够实现将'./src/index.js'打包成'./dist/main.js'

不过每次都要输入这个命令,非常麻烦,我们在package.json中scripts中加入两个成员:

"dev":"webpack --mode development", "build":"webpack --mode production"

以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development,执行npm run build便相当于执行webpack --mode production。

我们在根目录执行:

npm run dev

可以看到根目录下生成了dist目录,并且dist目录下生成了main.js文件,main.js文件已经打包了src目录下index.js文件的代码。

七、配置其他参数

我们如果需要配置webpack指令的其他参数,只需要在webpack –mode production/development后加上其他参数即可,如:

webpack --mode development --watch --progress --display-modules --colors --display-reasons

当然,这也可以写入package.json的scripts之中。

八、总结

我们可以将以上探索进行整理总结,首先是注意事项:

1、webpack-cli必须要全局安装,否则不能使用webpack指令;
2、webpack也必须要全局安装,否则也不能使用webpack指令。
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。
4、默认入口文件是./src/index.js,默认输出文件./dist/main.js。

配置步骤:

1、创建工程目录;
2、初始化工程目录:npm init。
3、全局安装webpack-cli。
4、全局安装webpack。
5、webpack –mode development/production进行打包,可在package.json中配置dev和build的脚本,便只需运行npm run dev/build,作用相同。
6、在webpack –mode development/production可串联设置其他参数。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1017570cf0c33c21861cd5dab3e5e820.html