零配置Webpack基本使用方法

原创 zheling 译文 Webpack 162阅读 2018-07-31 11:56:02 举报

1.安装installation

进入项目目录,初始化package.json并以项目开发依赖来安装webpack及cli。

2.添加 NPM Script 命令

于 package.json 的 script 中,添加执行命令。执行命令 npm run build 即可进行 bundle 。

3.新特性一:默认的出入口

默认入口entry:./src/index.js
默认出口output: ./dist/main.js

4.新特性二:开发模式和生产模式

development mode or production mode 在 NPM Script 的直接定义即可。

Production mode:应用了许多开箱即用的优化项,如,代码压缩,tree-shaking等等。

Development mode:对速度进行了优化且仅提供了一个非压缩的 bundle 。

5.如何覆写默认的出入口?

6.使用 Babel 编译ES6

1.Babel-loader是用于将ES6编译成ES5的webpack loader,为了使用该loader需要安装其依赖项:

1.1.babel-core
1.2.babel-loader
1.3.babel-preset-env 

2.在项目目录下新建 .babelrc 文件并写入一下内容:

3.两种方法以配置babel-loader

3.1 使用 webpack 配置文件
3.2 使用 --module-bind NPM Script

3.1 为何还需要用到 webpack 配置文件?

webpack零配置概念目前仅限于前面所说的两个新特性,使用loaders仍然需要配置文件。

项目目录下新建 webpack.config.js 文件并写入一下内容:

无需指定入口,除非你要自定义入口。
接下来你就可以在入口文件中尝试使用 ES6 ,然后 npm run build 即可在 ./dist/main.js 中看到编译生成的ES5 代码。

3.2 通过 --module-bind 无配置文件使用 babel-loader

这种方法很明显会使得 scripts 很臃肿,推荐使用第一种方法。

7.Webpack 4 与 React 配合使用

7.1 得先安装和配置好Babel,即如第三点提到的。

7.2 安装React核心库及依赖

修改 .babelrc 文件:

在webpack.config.js配置 babel-loader 以读取 .jsx 文件:

测试使用:
新建 ./src/App.js :

在 ./src/index.js import App.js 后 npm run build 即可。

8.HTML webpack Plugin

需要两个常用的 plugin 来处理 HTML文件:
html-webpack-plugin
html-loader

安装并使用 plugins

webpack.config.js:

新建 ./src/index.html ,

执行 npm run build,./dist 下会输出HTML文件,该文件自动注入了需要的JavaScript脚本。

9.将CSS提取为文件

过去使用 extract-text-webpack-plugin (Webpack 4中无法使用)来完成这个工作,但其存在一些不足,所以在 Webpack 4 中使用 mini-css-extract-plugin (使用该plugin的前提是更新Webpack至 4.2.0 ,否则无效) 来代替。

9.1 安装

新建 css 文件, ./src/main.css

配置使用plugin

在入口./src/index.js 中 import CSS file

npm run build 查看 ./dist 。

10.Webpack dev server

10.1 安装 webpack-dev-server

10.2 修改 NPM Script

10.3 npm run start 即可

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复