webpack
webpack是前端模块化打包工具
-
grunt/glup核心是task，主要核心是前端流程的自动化，模块化不是它的核心；工程模块比较简单没有依赖可以用。
-
webpack加强模块化的开发管理，而不是压缩文件预处理功能，这些只是它的附加功能。需要node环境
一、webpack入门流程
npm init -y //初始化生成 package.json 文件
npm i webpack --save-dev //安装 webpack，save-dev开发时依赖
npm install webpack webpack-cli webpack-dev-server -g //安装 webpack-cli
"private": true, //调整 package.json 文件，以便确保我们安装包是私有的(private)
npm install --save lodash //打包 lodash 依赖
npx webpack .\src\main.js --output-filename bundle.js --output-path .\dist\ --mode development //输入main.js文件，输出bundle.js文件，输出路径dist目录下
npx webpack ./src/main.js -o ./dist/bundle.js //效果基本与上面相同
webpack ./src/main.js -o ./dist/bundle.js//表示把模块化的入口文件main.js打包到dist文件bundle.js
二、配置压缩js的结构
webpack.div.js
var path = require('path') //node系统模块
module.exports = {
entry: {
main: './src/main.js'//入口文件
},
mode: 'development',// 压缩模式
output: { //输出配置
filename: '[name].js', //输出名字配置【name】为原来的名字
path: path.resolve(__dirname, '../dist') //输出的路径
}
}，
module: {
rules：[
//用来加载loader【loader是用来打包其他文件格式的】
]
}
}
三.lodash配置
一、css部分
-
需要下载两个loader
npm i css-loader style-loader
在main.js中引入css 依赖
require（./name.css） //一定加入./否则会报错
如果需要可以安装less-loader或者sass-loader
//在webpack.config.js中添加以下
module: {
rules: [{
test: /\.css$/,
use: [
//webpack在使用多个loader时，是从右向左的，从下到上的
{
loader: "style-loader"//负责把样式添加到dom中
},
{
loader: "css-loader"//只负责css文件的加载
}
]
}]
}
// 需要注意css 在HTML中的引入，需要output配合
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/'
},
二、HTML
- 需要下载三个loader
npm i file-loader html-loader extract-loader
config/webpack.dev.js
var path = require('path') //node系统模块
module.exports = { //暴露
entry: { //入口文件
main: './src/main.js'
},
mode: 'development', //开发模式 可使用production生产模式进行替换
output: { //输出
filename: '[name].js', //输出时文件名
path: path.resolve(__dirname, '../dist'), //commonJs提供 文件名 -》输出路径
publicPath: '/' // html中的引入文件路径
},
devServer: { //热跟新
contentBase: 'dist', //服务器指向文件名。类似node中的静态资源加载
overlay:true //报错显示到浏览器
},
module: { //loader配置
rules: [{
test: /\.css$/, // 正则css
use: [{
loader: "style-loader" //渲染
},
{
loader: "css-loader" //压缩
}
]
},
{
test: /\.html$/, //正则 所有的html
use: [{
loader: "file-loader", //文件输出
options: { //名字
name: "[name].html"
}
},
{
loader: "extract-loader" //与main.js分离，打包成一个独立的文件
},
{
loader: "html-loader", //渲染，压缩
options: {
attrs: ["img:src"]
}
}
]
}
}
src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
</div>
</body>
<script src="/main.js"></script>
</html>
main/main.js代码
//依赖
requrie（'./main.css'）
requrie（'./html.css'）
三，图片
npm install file-loader --save-dev
npm install url-loader --save-dev
url-loader内置了file-loader，一般只需要安装url-loader即可，但是当加载的图片转化成base64时，limit后的值小于图片的大小时候，就需要下载file-loader
//file-loader
{
test: /\.(jpg|git|png)$/, //图片
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:8].[ext]" //压缩为一个名字8位哈希值的图片，[ext]表示扩展名
}
}]
}
//url-loader
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,//当图片小于limit值的时候，就会把图片编译成base64字符串的形式
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
四、webpack实现vue开发环境的搭建
webpack.config.js
var path = require('path') //node系统模块，用于动态获取路径
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue-loader 伴生插件
module.exports = { //暴露
entry: { //入口文件
main: './src/main.js'
},
mode: 'development', //开发模式 可使用production生产模式进行替换
plugins: [
new webpack.BannerPlugin("最终版权归Snyu.L所有") //做版权声明；打包后bundle.js文件头部就会显示
new VueLoaderPlugin() //vue-loader的VueLoaderPlugin
],
output: { //输出
filename: '[name].js', //输出时文件名
path: path.resolve(__dirname, '../dist'), //commonJs提供 文件名 -》输出路径
publicPath: '/' // html中的引入文件路径
},
devServer: { //热跟新
contentBase: 'dist', //服务器指向文件名。类似node中的静态资源加载
overlay:true //报错显示到浏览器
},
resolve: { //引入vue.js
alias: {
'vue$': 'vue/dist/vue.js'
}
},
module: { //loader配置
rules: [{
test: /\.css$/, // 正则css
use: [{
loader: "style-loader" //渲染
},
{
loader: "css-loader" //压缩
}
]
},
{
test: /\.html$/, //正则 所有的html
use: [{
loader: "file-loader", //文件输出
options: { //名字
name: "[name].html"
}
},
{
loader: "extract-loader" //与main.js分离，打包成一个独立的文件
},
{
loader: "html-loader", //渲染，压缩
options: {
attrs: ["img:src"]
}
}
]
},
{
test: /\.(jpg|git|png)$/, //图片
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:8].[ext]" //压缩为一个名字8位哈希值的图片
}
}]
},
{
test: /\.vue$/, //压缩vue
use: [{
loader: "vue-loader" //压缩vue的loader
}],
exclude: '/node_modules/' // 排除压缩的文件
}
]
}
}
dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<app></app>
</div>
</body>
<script src="/main.js"></script>
</html>
src/app.vue
<template>
<div>
我是{{a}}
</div>
</template>
<script>
export default {
name: 'app',
data:function(){
return {
a:'小渣渣'
}
}
}
</script>
<style>
</style>
ser/main.js
import Vue from 'vue'
import app from "./app.vue"
new Vue({
el:'#box',
components:{
app
}
}
)
五.es6的语法处理
如果将es6的语法转化成es5的语法时，我们就需要babel
npm i --save-dev babel-loader@7 babel-core babel-preset-es2015
//配置方法
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']//转化成2015的只需要写成['es2015']
}
}
}
]
}
六.搭建Vue项目
1.先下载指定版本的vue，通过npm下载 ：npm install vue -save
2.在main.js进行引入vue,在index.html中用
import Vue from "vue"
const app = new Vue({ //new Vue()
el:"#app",
data:{message:""},
})
//index.html
<div id="app"> <h1>{{message}}</h1></div>
//抽离成组件
//index.html
<div id="app"></div>
//app.vue,单独写一个app.vue放组件
<script>
export default {
template:"<div></div>",
data(){
return{
message:""
}
}
methods{
btn(){
}
}
}
</script>
//main.js
import Vue from "vue"
import App from "./vue/app.vue"
new Vue({
el:"#app",
template:"</App>",
components:{App}
})
**注意：需要安装加载app.vue的npm方可实现编译
npm i vue-loader(注意版本或许会报错无法运行) vue-template-compiler --save-dev //用于开发时依赖，最后上线打包后都会把template
//webpackconfig.js中配置
rules:[
......
{
test:/\.vue$/ ,
use:["vue-loader"]
}
]
3.注意vue有两个版本一个版本是不支持有template模板的
- runtime-only 代码中不可以有任何的template
- runtime-compiler 代码中可以有template，因为compiler可以用于编译template
runtime-compiler 转义方式就是
先由模板template -->解析成ast（抽象语法树）–>转成render函数–> 虚拟dom ( vdom)–>ui
runtime-only 转义方式就是（性能更高 ，代码量更少，相对比runtime-compiler少6kb）
先由模板template–> 虚拟dom ( vdom)–>ui
4.综上所述需要指定版本方可使用，在webpack.config.js中配置
module.exports: {
.....
resolve:{
//alias:取别名
alias:{
"vue$":"vue/dist/vue.esm.js" //import Vue from "vue"引入的时候会去vue中找 //vue.esm.js这个版本，
}
}
}
七、打包html的plugin
1.目前我们的index.html是存放在根目录中的，在发布项目时候是在dist文件中的，但是如果没有index.html文件那么打包就没有意义；需要使用到插件HtmlWebpackPlugin插件：它可以让我们自动生成一个index.html的文件插入到body中
npm install html-webpack-plugin --save-dev
//需要在webpack.config.js中配置
cosnt htmlwebpackplugin = require("html-webpack-plugin")
plugins:{
....
new htmlwebpackplugin({
template:"index.html"//使用什么模板存放index.html
})
}
八、js压缩的Plugin（丑化打包，开发阶段不需要，上线时候需要压缩）
npm i uglifyjs-webpack-plugin@1.1.1 - save-dev
//需要在webpack.config.js中配置
cosnt uglifyjsplugin = require("uglifyjs-webpack-plugin")
plugins:{
....
new uglifyjsplugin()
}
九、搭建本地服务器
npm i -save-dev webpack-dev-server@2.9.1
//需要在webpack.config.js中配置
devServer:{
contentBase:"./dist",
inline:true
}
//也可以在json中配置
"dev":"webpack-dev-server --open" //直接打开服务器，打开本地服务npm run dev
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
