webpack4.1的开发环境搭建

什么是Webpack

什么是Webpack?官网有过一句话:

webpack is a module bundler

webpack就是一个模块打包器,在webpack中,所有文件都可以是一个模块,列如JS、CSS、图片等等,webpack中可以使用loader去处理他们。

第一步(安装node.js)

webpack是基于node.js的,首先需要安装node.js。
官网 => https://nodejs.org/en/

下载LTS或者是Current版本都可以。

如果没有科学上网工具或者网络环境不佳的话,可以使用cnpm,这是淘宝用来解决npm的速度问题的一个项目:
cnpm => https://npm.taobao.org/

安装webpack

首先创建一个文件夹,例如这里创建一个名字为HelloWebpack的文件夹:

1
2
3
mkdir HelloWebapck
cd HelloWebpack
npm init -y

这里初始化了一个npm的包,-y表示在创建的时候提示的选项全部选择Yes。
这样目录下就多了一个package.json的文件。

然后使用命令来安装webpack,首先全局安装webpack

npm i -g webpack

此操作只需要一次就行了,然后在本地在此安装一次

npm i -D webpack

等待完成,就安装好了webpack,出现了WARN无需理会,出现ERROR才说明出现问题,如果网络状况不佳,可以使用cnpm,把文中的npm替换为cnpm。

安装完成之后,输入

webpack –version

这里我的版本是4.1

Example

这里创建一个index.html文件作为显示效果的文件,并输入一些内容

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>

这里引入了同路径下的dist文件夹下的main.js文件,如果你不经过一些配置的话,这是webpack的默认输出路径和Name。
这里需要注意,如果不进行任何配置的话,webpack会默认加载src文件夹下的文件,所以这里创建一个src文件夹,在创建一个index.js作为入口:

1
console.log('Hello webpack.')

执行webpack:

这里有个警告,目前无需理会,打开index.html看看效果:

可以看到已经出来效果了,但是这只是webpack的一个小应用,在实际开发中需要用到不少webpack的东西。

Webpack Config

webpack的复杂主要在配置文件,这可能是个比较头疼的问题,这里来看一些配置里面的定义:

  • entry
  • output
  • loader
  • plugins

Entry and ouput

entry,也就是入口,上文中有说到如果不经配置的话,webpack会默认加载项目下的src/index.js文件,可是你可以在配置文件中去定义入口,首先在根目录下创建一个webpack.config.js文件,这个文件就是webpack的配置文件了,写入以下内容来指定入口。

1
2
3
4
5
6
7
8
9
const path = require('path')

module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.[name].js'
}
}

首先看到了module.exports这里是指定了这个js文件的外置接口,这样就可以让其他JS文件去引用了。
这里的entry指定了入口文件为src/js/index.js,我也把index.js文件稍微变换一下位置。
这里的output指定了出口,也就是在打包完成之后输出的目录和文件名,这里使用到了获得到了本目录的绝对路径再加上dist目录,在下面也设置了输出文件的文件名。

再次输入webpack打包:

在看看dist目录下:

可以看见已经成功了。

Loader

loader可以用作处理一些非JS的文件,或者对JS文件拓展,列如已经被广泛认知的ES6,下面来看看定义:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const path = require('path')

module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.[name].js'
},
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
}
]
}
}

这里使用了官网的例子

  • test表示选择一个文件类型
  • use表示对这种文件类型使用什么loader进行转换

Plugins

loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path');

const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

module.exports = config;

可能有用的资源

webpack中文官网
https://doc.webpack-china.org

webpack教程
https://blog.zfanw.com/webpack-tutorial/

https://hulufei.gitbooks.io/react-tutorial/content/webpack.html

http://gcidea.info/2016/12/16/webpack-demos/

webpack脚手架

http://www.css88.com/doc/parcel/

https://github.com/heyui/hey-cli/blob/master/README_zh.md

0%