1.什么是webpack?
webpack是用于编译JavaScript模块。
通俗的来说,webpack的一个模块打包器。本质上就是一个构建(包含:编译,压缩,丑化等)工具,且是目前最流行的构造工具。可以对所有资源(.html,.sass,.scss,.css,.png|.jpg|.jpeg,.js|.ts,模板文件ejs,hbs,pug)进行打包。
2.如何安装
2.1cnpm i webpack -g
cnpm i webpack-cli -g
或者cnpm i webpack webpack-cli -g
当然没有镜像的可以用npm 下载速度较慢而已 (可以在终端运行webpack相关命令)
2.2 npm init -y
创建文件夹并初始化,文件夹中会出现package.js文件,是基础的一些配置,包括文件名称/版本/描述/入口文件/关键字/作者等。
我安装的版本如下:
因为webpack-dev-server不支持webpack5.0和webpack-cli4.0
所以编译的时候用 webpack serve
3.使用webpack.config.js配置
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: __dirname + "/src/index.js", // 入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
// 配置本地服务器
devServer: {
// 静态资源目录,index.html所在的目录。
contentBase: path.join(__dirname, 'dist'),
index: 'index.html',
compress: true, // 是否压缩
port: 9000, // 服务器的端口
host: "localhost", // 主机
open: true,
hot: true,
},
// 安装的各种loaders在module模块中配置着。
module: {
// 每一个loader本质上就是module中的一个规则rule
rules: [
{
test: /\.css$/, // 正则匹配以.css结尾的文件
use: ['style-loader','css-loader'] // 需要用的loader,一定是这个顺序,因为调用loader是从右往左编译的
},
{
test: /\.(scss|sass)$/, // 正则匹配以.scss和.sass结尾的文件
use: ['style-loader', 'css-loader', 'sass-loader'] // 需要用的loader,一定是这个顺序,因为调用loader是从右往左编译的
}
]
},
// webpack所使用的插件,其中BannerPlugin是webpack内置的插件。
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究')
]
}
4.
此外还有进阶版
从零开始搭建一个简单的基于webpack的vue开发环境
https://segmentfault.com/a/1190000012789253