webpack4打包

webpack 4不再需要配置文件,下面来测试一下:

首先创建一个目录:test

然后使用cmd初始化

npm init -y

引入webpack4

npm i webpack --save-dev

继续引入webpack-cli

npm i webpack-cli --save-dev

这个时候我们的文件夹是这样的:

然后修改package.json,加入build脚本

  "scripts":{
    "build":"webpack"
  }

保存并

npm run build

这个时候如果出现:

证明我们快成功了,这里说,错误:未找到空的模块,这就涉及到了webpack4中的关于“入口”的知识:

webpack 4会在./src中找entry point 入口点:

但是webpack 4不再需要配置文件,所以默认为src/index.js文件,即新建文件src/index.js:

并在js文件中写任意JS代码:

console.log(`test Webpack 4`);

然后我们再运行:

npm run build

这时,bundle包将会出现在test/dist/main.js中:

这里发现,并没有output file配置,原因和上面一样,webpack 4不再需要配置文件

这里涉及到两个模式:生产模式(production)和开发模式(development)

上面run以后我们会发现警告:

意思是:这个模式选项没有被设置,webpack降会退到生产模式,将mode选项设置为development或production以启用环境默认值。

这个时候打开package.json配置scripts:

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

这个时候运行:

npm run dev

发现在开发环境下,打包成了一个bundle文件,没有被压缩

换种方式:

npm run build

再回去发现,dist/main.js就打包完成了。

production mode(生产模式) 可以开箱即用地进行各种优化。 包括压缩,作用域提升,tree-shaking 等。

development mode(开发模式)针对速度进行了优化,仅仅提供了一种不压缩的 bundle 。

未完,参考:https://www.css88.com/archives/9436

猜你喜欢

转载自blog.csdn.net/weixin_41564885/article/details/85331977