webpack 4.0+版本(webpack 与 cli 分离)
1.起步
1-1 安装
我们安装的时候把webpack安装到开发依赖(–save-dev)中，因为 webpack 只是一个打包工具，项目上线不需要，上线的是打包结果，而不是工具，所以为了区分核心包依赖和开发工具依赖，这里通过 --save 和 --save-dev 来区分
-
全局安装
npm install --global webpack npm install --global webpack-cli -
本地安装（推荐）
npm install --save-dev webpack npm install --save-dev webpack-cli //--save-dev 简写 -D npm i -D xxx
1-2 打包
webpack 模块入口文件路径 模块出口文件路径
1-3 划分目录
- 源码存储在 src 目录
- 打包后存放在 dist 目录
1-4 打包配置文件 (webpack.config.js)
// 实际在node环境中运行
const path = require('path')
module.exports = {
entry: './src/main.js', //入口文件模块路径
output:{
path:path.join(__dirname,'./dist'),//__dirname node内置变量
filename:'bundle.js'//打包后的文件名
}
}
1-5 安装到项目中的需要配置 Npm scripts (package.json 的 scripts)
-
“build”:“webpack”
-
npm run a
##Strat比特殊
-
npm start
"name": "webpack",
"version": "1.0.0",
"description": "My webpack project",
"main": "index.js",
"dependencies": {
"webpack-cli": "^3.3.5",
"webpack": "^4.35.0"
},
"devDependencies": {},
"scripts": {
// "a":"a.js"
+ "build": "webpack",
+ "dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC"
}
1-6 ES6规范
- 导入 import (require)
- 导出 export (module.exports)
2.HtmlWebpackplugin
解决资源打包 根目录下的index.html无法访问资源的问题
解决打包文件改了 index 的引入文件也要进行修改
实际上还是把你的index.html打包到 dist (和bundle放一块) 自动引用 scripts
- 安装
npm i -D html-webpack-plugin
- 配置
+ const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
+ new HtmlWebpackPlugin({
+ template:'./index.html'
+ })
]
3.Develoment
3-1 hot-module-replacement 热更新
-
配置
webpack.config.js
const webpack = require('webpack'); devServer: { contentBase: './', + hot: true } plugins: [ new HtmlWebpackPlugin({ template:'./index.html' }), new VueLoaderPlugin(), + new webpack.HotModuleReplacementPlugin() ] -
package.json 如果是安装
webpack-cli"dev": "webpack-dev-server --hotOnly"
3-2 webpack-dev-server
解决每次打包都麻烦，而且即使有-save也不方便，还需要自己手动刷新浏览器。webpack-dev-server这个工具可以实现监视代码改变，自动打包，打包完毕自动刷新浏览器的功能
- 安装
npm i -D webpack-dev-server
- 配置
//webpack.config.js
mode: 'development',
entry: './src/main.js', //入口文件模块路径
+ devtool: 'inline-source-map',
//这里模拟dist目录。缓存在内存中不会显示 一般为 ./
+ devServer: {
+ contentBase: './dist'
+ }
//package.json
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch",
+ "start": "webpack-dev-server --hotOnly" //这里是start 所以使用npm start 否则 npm run xxx 建议dev
3-2-1 启动开发模式
npm start//取决于"start": "webpack-dev-server --open"
4. 对于Es6语法处理 babel(默认只转换语法)
- babel安装
npm install -D babel-loader @babel/core @babel/preset-env
- 配置
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
4-1 Polyfill(转换API)
-
安装
npm install -D @babel/polyfill -
配置
//原来 //entry: './src/app.js', //入口文件模块路径 module.exports = { entry: ["@babel/polyfill", "./src/main.js"] }
4-2 配置transform-runtime 来解决代码重复
在打包过程中，babel 会给某些包提供一些工具函数，而这些工具函数可能会重复出现在多个模块。这样会导致打包体积过大，所以babel提供了一个babel-transform-runtime来解决这个打包体积过大的问题。
-
安装
npm install -D @babel/plugin-transform-runtime npm install --save @babel/runtime -
配置（cacheDirectory 解决webpack打包慢的问题）
rules: [ // the 'transform-runtime' plugin tells Babel to // require the runtime instead of inlining it. { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { cacheDirectory:true, presets: ['@babel/preset-env'], //配置此行 plugins: ['@babel/plugin-transform-runtime'] } } } ]
5.Loader
5-1.loading css
- 安转
npm i -D style-loader css-loader
- 引入
//举例
import './app.css'
-
配置webpack
顺序 不可逆
style-loader => css-loader
module:{ rules: [ { test: /\.css$/, use: [ // style-loader //{ loader: 'style-loader' }, // css-loader // { //loader: 'css-loader', //此处是一个坑 设置modules可能会导致打包组件css选择器乱码 导致无法使用 // options: { // modules: true // } //} use: ['style-loader', 'css-loader'] ] } ] }
2.Loading image
- 安装
npm i -D file-loader
- 配置
module: {
rules: [{
test: /\.css$/,
use: [
// style-loader
{
loader: 'style-loader'
},
// css-loader
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}, {
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}]
}
3.loading less
- 安装
npm i -D style-loader css-loader less-loader less
- 配置
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
4.loading Vue
-
安装
npm install -D vue-loader vue-template-compiler -
配置
// webpack.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ // ... 其它规则 { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin() ] }
加载使用第三方包的问题
例如：
import $ from 'jquery'
这样打包也会同时打包 jquery 到 bundle.js
解决办法： (key为包名 value为接口 )
module.exports = {
//...
externals: {
jquery: 'jQuery',
vue:'Vue',
'vue-router':'VueRouter'
}
}
6.模块环境中使用vue-router
-
安装
npm i vue-router -
引用资源
<script src="/node_modules/vue-router/dist/vue-router.js"></script> -
配置externals
module.exports = { //... externals: { vue:'Vue', 'vue-router':'VueRouter' } } -
在
router.js加载使用import VueRouter from 'vue-router' import Foo from './components/Foo.vue' import Bar from './components/Bar.vue' export default new VueRouter({ routes:[ { path:'/foo', component:Foo }, { path:'/bar', component:Bar } ] }) -
在
main.js文件中配置使用路由对象import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ components:{App}, router, template:'<App />' }).$mount('#app') -
在
App.vue中设置路由出口<template> <div id="app"> <h1>跟组件</h1> <ul> <router-link tag="li" to="/foo"> <a>Foo</a> </router-link> <router-link tag="li" to="/bar"> <a>Bar</a> </router-link> </ul> <div> <router-view></router-view> </div> </div> </template> <script> </script> <style> </style>
SP：附加
只安装 package 里面 dependencies 依赖内容
npm i --production
--save和 --save-dev的区别
我们把开发工具相关的依赖信息保存到devDependencies选项中。把核心依赖（例如 vue ）的依赖信息保存到 dependencies选项中。
这样做的话，就是把开发依赖和核心依赖分开了，因为开发依赖在打包结束之后上线的话就不需要。
最后项目上线，我们真正需要安装发布得的是 dependencies依赖中的包也就是 npm i --production
8715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
