webpack4.1.1的使用详细教程

Posted NAVYSUMMER

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack4.1.1的使用详细教程相关的知识,希望对你有一定的参考价值。

安装全局webpack

  cnpm install -g webpack

安装全局webpack-cli

  npm install -g webpack-cli

初始化:生成package.json文件

  npm init

安装包

  npm install --save lodash

新建src文件夹:文件名不能修改

新建index.html文件,注意src="./dist/main.js,不能修改

目录结构如下:

 


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"

执行webpack --mode development

 

执行npm run dev,相当于执行webpack --mode development

 

以上是关于webpack4.1.1的使用详细教程的主要内容,如果未能解决你的问题,请参考以下文章

SQL*Loader详细使用教程:命令行参数

zenmap 教程 要图 详细亲

Vue3.x 超详细安装教程

Nginx详细教程

宝塔Linux面板的安装配置以及基本使用教程(超详细)

truffle详细使用教程