这篇文章主要讲了如何利用webpack构建一个项目，如何利用webpack-dev-server自动运行修改内容，如何打包css，less等，如何处理图片打包，使用url-loader以及如何使用字体图标。

webpack-study

  1. 新建一个webpack-study项目目录

  2. 初始化项目

    1
    npm init -y

  3. 创建项目目录

1
2
3
4
5
// 在webpack-study目录下添加两个文件夹
dist
src：
- index.html
- mian.js
  1. 在main.js中添加测试的js代码
1
console.log('webpack is ok!')
  1. 在项目目录下添加配置文件webpack.config.js
1
2
3
4
5
6
7
8
9
let path = require('path')
let config = {
    entry: path.join(__dirname, './src/main.js'),
    putput: {
        path: path.join(_dirname, './dist'),
        filename: 'bundle.js'
            }
}
module.exports = config
  1. 在package.json中添加一个脚本
1
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  1. 安装webpack-dev-server
1
2
3
4
5
6
7
8
9
10
11
12
npm i webpack-dev-server -D

# 报错 webpack-dev-server@3.1.14 requires a peer of webpack@^4.0.0 but none is installed.
# 因为之前全局安装了webpack@3.8.1 这里需要在项目中安装一个webpack
npm i webpack -D

# 运行 npm run dev 又报错
# Please install 'webpack-cli' in addition to webpack itself to use the CLI
# webpack@4.0+版本需要安装 webpack-cli
npm i webpack-cli -D 

# 再次运行 npm run dev 成功打开index.html f12后可以看见 console.log打印内容
  1. 使用html-webpack-plugin插件后不再需要在index页面中引入js文件
1
npm i html-webpack-plugin -D
1
2
3
4
5
6
7
8
9
// 在webpack.config.js中引入html-webpack-plugin插件包
let htmlWebpackPlugin = require('html-webpack-plugin')
// 在配置文件中添加plugin插件节点
plugin: [
    new htmlWebpackPlugin({
        template: path.join(__dirname, './src/index.html'),
        filename: 'index.html'
    })
]
  1. 打包css文件,在src总添加index.css文件，并在main.js中引入该文件
1
2
3
import './src/index.css';
// 保存后编译出错
// You may need an appropriate loader to handle this file type.
  1. 按照错误提示按照打包css的loader
1
npm i style-loader css-loader -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 在配置文件webpack.config.js中添加module模块，并引入css打包loader
module: { // 配置第三方loader模块
    rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ]
}

// 如果需要打包less文件就要安装响应的打包loader
// npm i less-loader less -D
// 还要在module的rules中添加 
// { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 如果需要打包sass文件就要安装响应的打包loader
// npm i sass-loader node-sass -D
// 还要在module的rules中添加 
// { test: /\.sass$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  1. 默认情况下webpack无法处理css中的url地址，不管是图片还是字体库都处理不了，这就需要安装url-loader
1
npm i url-loader file-loader -D
1
2
3
4
5
6
7
8
9
10
// 在webpack.config.js中的module的rules中添加下面的打包规则,file-loader是url-loader内部依赖不用写，这里不用[]因为只有一个loader包
{ test: /\.(jpg|png|gif|bmp|jpeg)/, use: 'url-loader' }
// 此时运行 npm run dev 就能看见页面中的图片，不过url地址显示的时 base64 格式的图片字符串，一般小图片转换，较大的图片就不必了。可以使用limit（这个数值大小根据需要设置）限制图片大小，单位是byte，如果引用了大于等于limit的图片则不会转化为base64格式的字符串，而小于给定值的图片就会转化为base64格式的图片。
修改为：{ test: /\.(jpg|png|gif|bmp|jpeg)/, use: 'url-loader?limit=17300' }
// 此时打开页面图片地址就是：url(5ac7cf9dfdfb0e7230c62a107ec2924b.jpg) 图片名称是个hash值，如果想要使用原来的名称可以在url-loader后面加第二个参数name，如下：
修改为：{ test: /\.(jpg|png|gif|bmp|jpeg)/, use: 'url-loader?limit=17300&name=[name].[ext]' }
//结果： url(测试.jpg)
为了防止重名情况需要将第二个参数name做进一步修改(名称前加上hash的前八位)：
{ test: /\.(jpg|png|gif|bmp|jpeg)/, use: 'url-loader?limit=17300&name=[hash:8]-[name].[ext]' }
//结果： url(5ac7cf9d-测试.jpg)
  1. 在项目中使用字体图标，以bootstrap为例
1
npm i botstrap -S

安装完会包提示： bootstrap@4.2.1 requires a peer of jquery@1.9.1 - 3 ，如果只是使用css不必在意这些提示。

1
2
3
// 在main.js中引入bootstrap.css
import 'bootstrap/dist/css/bootstrap.css';
// bootstrap4 放弃了bs3中的字体，取而代之建议使用其他的，比如 https://octicons.github.com/ 和http://fontawesome.io/ 这里可以将bs3中的字体样式拷贝到bootstrap.css中同时将bs3中的fonts文件拷贝到bs4的dist文件目录下继续使用
1
2
// 在webpack.config.js中的module的rules中添加bs3字体的打包规则
{ test: /\.(eot|svg|ttf|woff|woff2)/, use: 'url-loader' }