1、完整的webpack.config.js配置
/*
首先创建webpack.config.js文件,然后执行下面步骤:
0.若未全局安装webpack,则先执行cnpm install webpack webpack-cli -g,安装过则跳过此步骤
1.npm init -y
2.在创建的package.json的scripts中加入如下代码:
"dev": "webpack --watch",
"serve": "webpack-dev-server --open --inline --progress --config webpack.config.js"
3.npm i style-loader --save-dev
4.npm i css-loader --save-dev
5.npm i mini-css-extract-plugin --save-dev
6.npm i html-webpack-plugin --save-dev
7.npm i file-loader --save-dev
8.npm i clean-webpack-plugin --save-dev
9.npm i webpack-dev-server --save-dev
10.npm link webpack --save-dev 或者 cnpm i webpack webpack-cli --save-dev
11.npm run dev
*/
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //清理dist的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: __dirname + "/src/index.js", //项目入口
output: {
path: __dirname + "/dist", //出口文件夹
filename: "index.js" //出口文件名
},
mode: 'development', //以什么模式打包 'development'和'production'
module: { //加载器loader
rules: [
//1.以<style>标签的形式引入在html 页内,'style-loader'
// {test: /\.css$/,use: ['style-loader', 'css-loader']},
//2.以<link>标签href 属性的形式实现外联引入,需要在plugins中配置HtmlWebpackPlugin
{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader']},
//3.图片资源 输出挂载到HTML模板
{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},
]
},
plugins: [
new HtmlWebpackPlugin({ //输出配置插件
template: './src/index.html',
hash: true, //为所有包含的脚本和CSS文件附加唯一的编译哈希,这对缓存清除很有用
filename: 'index.html', //打包后生成的文件名 放在output.path里面
template: './src/index.html', //来自哪里 模板文件
inject: 'body', //引入js的位置:引入js的位置: 'head'-头部引入 'body'/true--</body>之前引入 false不引入
minify: { //压缩项配置
removeComments: true, //是否清除HTML注释
collapseWhitespace: true, //是否压缩HTML
removeScriptTypeAttributes: true, //是否删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //是否删除<style>和<link>的type="text/css"
minifyJS: true, //是否压缩页内JS
minifyCSS: true //是否压缩页内CSS
}
}), //打包的时候 挂载资源到指定模板的配置插件
//以<link>形式时打包的输出路径,它会把src/index.js中导入的两个css文件都挂载到dist/css文件的17869e.css中
new MiniCssExtractPlugin({filename: './css/[hash:6].css'}),
new CleanWebpackPlugin(), //用来清理每次重新打包的时候的dist文件夹中多余的东西
new webpack.HotModuleReplacementPlugin() //热更新服务
],
devServer: { //热更新
contentBase: './dist', //相当于帮我们搭建了一个服务器 这个代表静态托管的目录
host: 'localhost',
compress: true,
// inline: true,
port: 8080,
open: true,
hot: true
},
}
2、Webpack项目配置文件解析
(1)入口(entry)
入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
module.exports = {
entry: __dirname + "/src/index.js",
}
(2)输出(output)
output属性告诉 webpack在哪里输出path它所创建的bundles,以及如何命名filename这些文件,默认值为"./dist"。
module.exports = {
entry: __dirname + "/src/index.js", //项目入口
output: {
path: __dirname + "/dist", //出口文件夹
filename: "index.js" //出口文件名
}
}
补充:多入口、多出口配置:
// 多入口、多出口配置
module.exports = {
//多入口配置
entry: { //项目入口
test1:__dirname + "/src/index.js",
test2:__dirname + "/src/bar.js",
},
//多出口配置
output: {
path: __dirname + "/mydist", //出口文件夹
/* 多入口对应的多出口 出口文件名字:[name]是一种关键字代表入口文件的名字,
多入口文件名字没有写就默认为main [hash:6]代表生成哈希值,6代表保留6位 */
filename: "[name].[hash].js" ,
},
mode: 'development' //以什么模式打包 'development'和'production'
}
(3)加载器(loader)
loader让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。
module.exports = {
entry: __dirname + "/src/index.js", //项目入口
output: {
path: __dirname + "/dist", //出口文件夹
filename: "index.js" //出口文件名
},
mode: "development", //以什么模式打包 'development'和'production'
module:{ //加载器loader
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']}
]
}
}
(4)插件(plugins)
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
entry: __dirname + "/src/index.js", //项目入口
output: {
path: __dirname + "/dist", //出口文件夹
filename: "index.js" //出口文件名
},
mode: "development", //以什么模式打包 'development'和'production'
module:{ //加载器loader
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']}
]
},
plugins:[
new HtmlWebpackPlugin({template: './src/index.html'})//打包的时候 挂载资源到指定模板的配置插件
]
}
3、webpack 与gulp 工具的区别
- webpack偏向于模块化开发的思想,gulp偏向于面向过程开发模式
- webpack适用于大型复杂的前端站点构建,gulp 轻量级
4、webpack里loader与plugin的不同
- loader负责文件格式转换
- plugin负责对转换后的文件进行修饰