webpack3.6.0学习笔记
webpack详解
一、webpack是什么？
现代js应用的静态模块打包工具
核心：进行模块化开发，处理模块化关系，将各种资源模块打包成为一个或多少个包（Bundle）
npm工具（node packages mannager）
与grunt/glup 打包的区别？
grunt/glup是配置一系列的task，并定义task处理事务。依次执行task，让流程自动化。
grunt/glup的工程模块化非常简单，没有用到太多模块化，只需要进行简单的合并压缩即可。
开发时依赖 devDependenices --save-dev
运行时依赖 dependenices
二、使用步骤
1.安装node环境（依赖node环境）
查看安装node版本 ：
node -v
2.安装webpack3.6.0
全局安装
npm install [email protected] -g
局部安装
package.json 定义script时 使用局部安装的环境
npm install [email protected] --save-dev
三、webpack的基本使用过程
模块化 AMD CMD
Common.js
function add(n1,n2) {
return n1+n2
}
function cheng(n1,n2) {
return n1* n2
}
module.exports ={
add,cheng
}
var flag=true
const {add,cheng}= require('./mathUtills')
ES6 Modules(自动采用严格模式)
export const name='w';
export const age=18;
export const h=188;
import {name,age,h} from './info';
npm 命令（处理各种文件的依赖）
webpack ./src/main.js ./dist/bundle.js
入口：./src/main.js
出口：./dist/bundle.js
文件名：webpack.config.js
在HTML文件引入bundle.js即可使用打包好的文件
四、webpack的基本配置
安装path包
初始化node（重命名最好是英文）
npm init
会生成package.json文件，显示当前项目的配置信息
配置文件名：webpack.config.js
const path=require('path')
module.exports ={
entry:'./src/bbb.js',
// output:'./dist/bundle.js',
output:{
path:path.resolve(__dirname,'dist'),//动态获取绝对路径
filename:'b.js',
},
}
package.json文件中
npm run build 命令映射 webpack 命令
优先使用本地webpack环境
通过node_modules/.bin/webpack 启动 本地局部打包
终端webpack命令使用全局环境打包
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
五、webpack使用css的基本配置
webpack 的loader
用于处理js以外的css，图片，less文件等
loader使用步骤
- npm安装对应loader
- 在webpack.config.js modules关键字下进行配置
webpack中文网
添加链接描述
处理css文件
style-loader 将模块的导出作为样式添加到 DOM 中
css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
- 依赖CSS文件
require('./css/index.css')
- npm安装style-loader， css-loader，（注意版本问题）
npm install style-loader --save-dev
npm install --save-dev css-loader
- style-loader， css-loader，在webpack.config.js modules关键字下进行配置
（webpack读取loader顺序从右到左）
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
六、webpack-less的文件处理
加载和转译 LESS 文件
- 依赖LESS文件
require("./css/special.less")
- npm安装less-loader （注意版本问题）
npm install --save-dev less-loader less
npm install --save-dev css-loader
3.less-loader,在webpack.config.js modules关键字下进行配置
（webpack读取loader顺序从右到左）
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
七、webpack图片的文件处理
url-loader ： 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
- 依赖图url
background: url(../img/a3.jpg);
- npm安装url-loader （注意版本问题）
npm install --save-dev url-loader
- style-loader， css-loader，在webpack.config.js modules关键字下进行配置
limit默认8196（8KB）
小于limite数值 将图片编译为base64位数字
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
大于limite数值 将使用file-loader
将文件发送到输出文件夹，并返回（相对）URL
- 依赖图url
background: url(../img/a3.jpg);
- npm安装file-loader （注意版本问题）
npm install --save-dev file-loader
3.file-loader ，在webpack.config.js modules关键字下进行配置
（webpack读取loader顺序从右到左）
module.exports = {
...
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
}
将图片进行打包 图片名是32位hash值
将图片放入一个文件夹 webpack.config.js配置
module.exports = {
entry: './src/bbb.js',
// output:'./dist/bundle.js',
output: {
path: path.resolve(__dirname, 'dist'),//动态获取绝对路径
filename: 'b.js',
//URL自动拼接
publicPath:'dist/'
},
}
将所有图片放入一个文件夹 防止重复 img/name
img：文件夹
name ：原名字
hash：8 防止命名冲突+8位hash值
ext：原图片扩展名
options: {
//当加载的图片 小于limit时 会将图片编译成base64字符串形式
//大于limit 报错 Cannot find module 'file-loader' 下载npm install --save-dev file-loader
limit:10000,
name:'img/[name].[hash:8].[ext]'
},
八、webpack-babel 使ES6转ES5
babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
- 使用ES6Y语法
const {add,cheng}= require('./mathUtills')
import {name,age,h} from './info';
- npm安装babel-loader （注意版本问题）
webpack 3.x | babel-loader 8.x | babel 7.x
npm install [email protected] @babel/core @babel/preset-env webpack
webpack 3.x babel-loader 7.x | babel 6.x
npm install babel-loader babel-core babel-preset-es2015 webpack
- babel-loader 在webpack.config.js modules关键字下进行配置
（webpack读取loader顺序从右到左）
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
// presets: ['@babel/preset-env']
presets: ['es2015']
}
}
}
]
}
八、webpack使用 vue的配置
- 引入vue.js
npm install vue --save
vue
import Vue from 'vue'
// import App from './vue/app.js'
import App from "./vue/App.vue"
new Vue({
el:'#app',
template:'',
data:{
msg:'sss'
},
components:{
}
})
<div id="app">
div>
runtime-only :代码中不可以有任何template
runtime-compiler：可以有template，compiler可用于编译template
修改webpack.config.js配置为runtime-compiler
resolve:{
//省略后缀名
extensions:['.js','.css','.vue'],
//别名
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
- vue组件化开发引入
el 与template区别
el用于指定Vue要管理的DOM ,可以帮助解析其中的指令、事件监听等等。而如果Vue实例中同时指定了template ,那么template模板的内容会替换掉挂载的对应el的模板。模板内容可抽离为三部分书写: template、 script、 style。
//使用vue进行开发
import Vue from 'vue'
import App from './vue/app.js'
const App={
template:' {
{msg}}
',
data(){
return{
msg:'sss'
}
}
new Vue({
el:'#app',
template:'<div id="app">
div>
- .vue文件封装处理
安装vue-loader和vue-template-compiler
npm install vue-loader vue-templ ate-compiler --save-dev
vue-loader 在webpack.config.js modules关键字下进行配置
vue-loader版本14以上，要配置另外的插件
{
test:/\.vue$/,
use:['vue-loader']
}
app.js
export default{
template:'',
}
``
App.vue
```javascript
<template>
<div>
<h2 class="title">{
{
msg}}</h2>
<Cpn></Cpn>
</div>
</template>
<script>
import Cpn from './Cpn.vue'
export default {
name:'App',
components:{
Cpn
},
data() {
return {
msg :'ddd'
}
},
}
</script>
<style scoped >
.title{
background: pink;
}
</style>
Cpn.vue
<template>
<div>
<h2> 我是cpn组件标题</h2>
<P>内容</P>
<h2>{
{
name}}</h2>
</div>
</template>
<script>
export default {
name:'Cpn',
data() {
return {
name:'CPN组件的name'
}
},
}
</script>
九、webpack使用 Plugin
- 认识plugin
plugin是插件的意思,通常是用于对某个现有的架构进行扩展。
webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。 - loader和plugin区别
loader主要用于转换某些类型的模块,它是一一个转换器。
plugin是插件,它是对webpack本身的扩展,是一个扩展器。 - 使用过程
一:通过npm安装需要使用的plugins某些webpack已经内置的插件不需要安装
二:在webpack configjs中的plugins中配置插件。
- 添加版权的Plugin BannerPligin（自带插件）
webpack configjs中的plugins中配置插件。
plugins:[
new webpack.BannerPlugin('最后版权归不知道谁所有'),
//开发阶段不需要丑化
//new UglifyjsWebpackPlugin()
],
- 打包HTML的plugin HtmlWebpackPlugins
一:通过npm安装需要使用的 HtmlWebpackPlugin
npm install html-webpack-plugin --save-dev
二:在webpack configjs中的plugins中配置插件。
const HtmlWebpackPlugins = require('html-webpack-plugin')
plugins:[
new webpack.BannerPlugin('最后版权归不知道谁所有'),
new HtmlWebpackPlugins({
template:'index.html'
}),
//开发阶段不需要丑化
//new UglifyjsWebpackPlugin()
],
- js压缩的Plugin
一:通过npm安装需要使用的plugins
npm install uglfji-webpack-plugin@1.1.1-save-dev
二:在webpack configjs中的plugins中配置插件。
const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugins = require('html-webpack-plugin')
module.exports = {
plugins:[
new webpack.BannerPlugin('最后版权归不知道谁所有'),
new HtmlWebpackPlugins({
template:'index.html'
}),
//开发阶段不需要丑化
new UglifyjsWebpackPlugin()
],
}
十、webpack搭建本地服务器
本地服务器基于node.js搭建,内部使用express框架
本身属性
contentBase :为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要写./dist
port:端口号
inline :页面实时刷新
historyApiFallback :在SPA页面中,依赖HTML 5的history模式
- 安装本地服务器[email protected]
npm nstall-save-dev webpack-dev-server@2.9.1
2.在webpack configjs中的devServer中配置服务的文件夹。
devServer:{
contentBase:'./dist',
inline:true
}
- package.json设置打包命令
出现一个localhost网址 复制可打开
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev":" webpack-dev-server --open"
},
十一、webpack配置文件的分离
-
文件目录
-
将webpack configjs分离成 base.config.js , prod.config.js 和 dev.config.js
-
安装 webpack-merge
npm install webpack-merge --save-dev
- prod.config.js配置
const webpackMerge=require('webpack-merge')
const baseConfig = require('./base.config')
const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
module.exports = webpackMerge.merge(baseConfig,{
plugins:[
//开发阶段不需要丑化
new UglifyjsWebpackPlugin()
],
}
)
- dev.config.js配置
const webpackMerge=require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge.merge(baseConfig, {
devServer:{
contentBase:'./dist',
inline:true
}
})
- pack.json配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js",
"dev": " webpack-dev-server --open --config ./build/dev.config.js "
},
总结
webpack3.6.0的学习笔记，版本较低会出现很多版本错误问题
这边是我目前运行出不报错的loader和plugin版本号。
{
"name": "webpackconfig",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js",
"dev": " webpack-dev-server --open --config ./build/dev.config.js "
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.3.0",
"file-loader": "^6.1.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.12.2",
"less-loader": "^5.0.0",
"style-loader": "^1.0.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^2.3.0",
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.6.10",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^5.2.0"
},
"dependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-es2015": "^7.0.0-beta.53",
"vue": "^2.6.12",
"webpack": "^3.6.0"
}
}