使用webpack构建项目构架

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

webpack-study

新建一个webpack-study项目目录
初始化项目

npm init -y

// 在webpack-study目录下添加两个文件夹
dist
src：
- index.html
- mian.js

在main.js中添加测试的js代码

console.log('webpack is ok!')

在项目目录下添加配置文件webpack.config.js

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

在package.json中添加一个脚本

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

安装webpack-dev-server

npm i webpack-dev-server -D

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

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

# 再次运行 npm run dev 成功打开index.html f12后可以看见 console.log打印内容

使用html-webpack-plugin插件后不再需要在index页面中引入js文件

npm i html-webpack-plugin -D

// 在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'
    })
]

打包css文件,在src总添加index.css文件，并在main.js中引入该文件

import './src/index.css';
// 保存后编译出错
// You may need an appropriate loader to handle this file type.

按照错误提示按照打包css的loader

npm i style-loader css-loader -D

// 在配置文件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'] },

默认情况下webpack无法处理css中的url地址，不管是图片还是字体库都处理不了，这就需要安装url-loader

npm i url-loader file-loader -D

// 在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)

在项目中使用字体图标，以bootstrap为例

npm i botstrap -S

安装完会包提示： [email protected] requires a peer of [email protected] - 3 ，如果只是使用css不必在意这些提示。

// 在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文件目录下继续使用

// 在webpack.config.js中的module的rules中添加bs3字体的打包规则
{ test: /\.(eot|svg|ttf|woff|woff2)/, use: 'url-loader' }

使用webpack构建项目构架

webpack-study

猜你喜欢