webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
一：webpack的作用:
1) 打包(依赖->把多个文件打包成一个js文件)
2) 减少http请求,较少的服务器压力,省宽带
3) 转化(比如 less/sass/ts) 需要loader
4) 优化(SPA越来越盛行,前端项目复杂度高,webpack可以对项目进行优化)
二：webpack安装（前提:必须先确保node环境已经安装了）
webpack webpack库
webpack-cli webpack客户端，包含webpack命令
webpack-dev-server 启动一个web服务
三：.开发环境:
简介:就是平时编写代码的环境
English:development
（2） 生产环境:
简介:项目开发完毕,部署上限
English:production
四： 常用loader：
1.js处理
babel-loader，
2.css处理
style-loader,css-loader,sass-loader,
3.文件处理
url-loader,file-loader 如果文件小于限制就转成DataUrl
4.处理vue文件
vue-loader 加载.vue文件并处理成js
ps:关于loader的写法:
1) use:["xxx-loader","xxx-loader"]
2) loader:["xxx-loader","xxx-loader"]
3) use:[
{loader:"style-loader"},
{loader:"style-loader"}
]
五：常用插件
CommonsChunkPlugin 抽取页面逻辑，已弃用，使用html-webpack-plugin 处理htmlHotModuleReplacementPlugin 模块热替换，webpack4.0的支持不够好UglifyjsWebpackPlugin 处理js，已启用合并到webpack4.0 webpack -p会压缩js和cssclean-webpack-plugin 删除构建的文件夹mini-css-extract-plugin 抽取css，替代extract-text-webpack-pluginvue-loader/lib/plugin 引入vue-loaderhtml-webpack-plugin 处理html，并自动引用output的文件
六： 安装命令
全局安装：cnpm install -g webpack, webpack-cli, webpack-dev-server
本地安装：cnpm install -D|--save-dev babel-loader
七：webpack执行命令:
webpack src/indexjs --output dist.bundle.js 在没有配置文件的情况下的执行方式
webpack 配置文件后直接webpack执行
webpack --mode development 开发环境编译
webpack --mode production 生产环境编译(压缩文件)
webpack --help 指令帮助(提示能用那些webpack的命令)
webpack -p 生产环境编译，自动压缩css、js
webpack -w 监听文件并实时构建
--devtool eval 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress 显示合并代码进度
--colors --hot 命令行中显示颜色
--content-base 指向设置的输出目录
八：webpack配置文件:
文件名:webpack.config.js 遵循commonJS规范
配置文件结构示例:
module.exports = {
entry:{}, 入口文件
output:{}, 出口文件 //整体打包的路径注意点需要一个绝对路径
module:{ 加载器
rules:[
{
test:/.js$/, 正则判断文件类型
exclude:"node_modules", 排除那些目录文件不使用babel-loader
use:["babel-loader],
}
]
},
plugins:[], 插件
devtool:"", 开发配置
devServer:{} 开发服务器
}
具体引用
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//配置插件
const plugins = [
// 引入vue插件
new VueLoaderPlugin(),
// 从页面中抽离css
new MiniCssExtractPlugin({
filename: '[name].[contenthash:6].css'
}),
// 删除构建目录
new CleanWebpackPlugin(['build/assets/']),
//处理html，并自动引用output的文件
new HtmlWebpackPlugin({
//目标文件
filename: '../index.html',
//模版文件
template: './src/index.html',
//对文件进行压缩
minify: {
//压缩代码
minimize: true,
//移除注释
removeComments: true,
//去掉空格
collapseWhitespace: true,
//压缩行内css
minifyCSS: true,
//压缩行内js
minifyJS: false
}
})
];
module.exports = {
//构建模式，development or production
mode: process.env.NODE_ENV || 'development',
//输入配置
entry: {
index: './src/js/index.js',
vendors: ['jquery']
},
//输出配置
output: {
filename: '[name].[hash:6].js',
path: path.resolve(__dirname, 'build/assets/'),
publicPath: 'assets/'
},
//是否生成source map以及如何生成
devtool: 'eval-source-map',
// devtool: 'none',
devServer: {
//serve加载的目录
contentBase: './build',
port: 9000,
//打开浏览器
open: true,
//启用gzip压缩文件
compress: true,
//强制页面访问index.html
historyApiFallback: true,
//实时刷新
inline: true,
//支持模块热更新
hot: true
},
//模块操作
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(js|jsx)$/, //正则判断文件类型
exclude: /node_modules/, //排除这个文件夹不处理
use: ['babel-loader'] //使用加载器
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [{
loader: 'url-loader',
options: {
name: '[name].[hash:6].[ext]',
limit: 1024
}
}]
},
{
test: /\.(eot|ttf|svg|woff)$/,
use: ['url-loader']
}
]
},
plugins,
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
}
}
}
}
};
vue写法
<template>
<div>
<h2>{{message}}</h2>
<ul>
<li v-for="(item,index) in arr">与琪{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
data: function(){
return {
message: 'Hello Vue!',
arr: [1,2,3,4,5,6]
}
}
}
</script>
相关js的写法
