webpack基础配置
关键字记录
module
exports
require
entry
main
mode
development
production
output
filename
path
publicPath
devServer
contentBase
overlay
rules
use
loader
配置步骤:
1.创建一个目录，在cmd命令提示符中，在该目录中初始化配置,执行完后会生成一个package.json文件:
npm init -y
2.本地局部安装webpack webpack-cli webpack-dev-serve
–save-dev本地安装
npm install webpack webpack-cli webpack-dev-server --save-dev
3.配置文件（webpack.dev.js）
const path = require("path")
module.exports ={
//入口：可以有多个
entry:{
main:["./src/main.js"]
},
//打包环境 development：开发 production：生产
mode:"development",
//出口：有且只有一个
output:{
//打包编译后的文件名
filename:"[name]-bundle.js",
//打包编译后文件的所在目录
path: path.join(__dirname,"../dist"),
//资源文件目录
publicPath:"/"
},
//本地服务配置
devServer:{
//默认是在dist下
contentBase:"dist"
}
}
4.运行webpack-dev-server
webpack-dev-server --config=config/webpack.dev.js
5.文件打包
webpack --mode development //开发环境
webpack --mode production //生产环境
配置css
1.安装style-loader和css-loader
npm install style-loader css-loader
2.配置css
//本地服务配置
devServer:{
//默认是在dist下
contentBase:"dist",
//报错显示
overlay:true
},
module:{
rules:[
{
test:/\.css$/,
use:[
{
loader:"style-loader"
},
{
loader:"css-loader"
}
]
}
]
}
配置htnl
1.安装加载器
npm install html-loader extract-loader file-loader
2.配置html
//html配置
{
test:/\.html$/,
use:[
//给打包后的文件起名
{
loader:"file-loader",
options:{
name:"[name].html"
}
},
//和js文件分离
{
loader:"extract-loader"
},
//加载html文件
{
loader:"html-loader"
}
]
}
配置图片
1.安装加载器
需要安装file-loader加载器
npm install file-loader
2.配置图片
{
test:/\.(jpg|png|gif)$/,
use:[
{
loader:"file-loader",
//"images/[name]-[hash:8].[ext]" 添加8位的hash值
options:{
name:"images/[name]-[hash:8].[ext]"
}
}
]
}
es语法转换(babel)
1.安装加载器
//转换工具
npm install babel-cli
//加载器
npm install babel-loader@7
//编译插件
npm install babel-preset-env
//解决promise对打包的环境污染
npm install babel-plugin-transform-runtime
2.配置文件
创建一个.babelrc文件，在这个文件中配置插件
{
"presets": [
[
"env",
{
"targets":{
//支持的浏览器和版本
"browsers":["last 2 versions"]
},
"debug":true
}
]
],
"plugins": [
//解决promise对打包的环境污染
"transform-runtime"
]
}
//js
{
test:/\.js$/,
use:[
{
loader:"babel-loader"
}
],
exclude:/node_modules/
},
把散落在各地的css集成一个css文件
1.安装mini-css-extract-plugin
npm install mini-css-extract-plugin
2.配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
let path = require("path");
module.exports = {
entry: {
main: ["./src/main.js"]
},
mode: "development",
output: {
filename: "[name]-bundle.js",
path: path.resolve(__dirname, "../dist"),
publicPath: "/"
},
devServer: {
contentBase: "dist"
},
module: {
rules: [
//html配置
{
test: /\.html$/,
use: [
//给打包后的文件起名
{
loader: "file-loader",
options: {
name: "[name].html"
}
},
//和js文件分离
{
loader: "extract-loader"
},
//加载html文件
{
loader: "html-loader"
}
]
},
//css
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: true,
}
},
{
loader: 'css-loader'
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename:"[name]-bundle.css"
})
]
}
压缩css文件
1.安装插件
optimize-css-assets-webpack-plugin
2.配置
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
optimization: {
minimizer: [new OptimizeCssAssetsPlugin({})],
},
plugins: [
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
})
引入vue文件，运行报错
1.引入
import Vue from 'vue'
2.webpack.comfig.js配置
resolve:{
alias:{
'vue$':'vue/dist/vue.js'
}
},
vue单页面
1.安装
npm install vue-loader vue-template-compiler --save-dev
2.配置
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module: {
rules: [
//vue 解析
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
resolve:{
alias:{
'vue$':'vue/dist/vue.js'
}
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name]-bundle.css"
}),
new VueLoaderPlugin()
]
3.使用
