webpack使用教程（二）

一、webpack安装(4.0)

webpack webpack-cli -D 安装前npm init -y 初始化本地开发环境依赖安装

二、webpack可以进行0配置

打包工具 --- 输出后的结果（js模块化）
打包（支持我们的js的模块化）

三、手动配置webpack 文件名 webpack.confifg.js

配置入口以及打包出口

entry: './src/index.js',//打包时的入口文件
output: {filename: "bundle.js",//打包后的文件名path: path.resolve(__dirname, 'build'),//打包后文件的路径  必须是绝对路径  __dirname当前项目的根目录 物理路径publicPath:"./"  //统一配置  给打包后的文件添加路径  可以是域名以及路径  可以按模块单独配置
}

手动修改webpack.config.js文件名
- npx webpack --config webpack.config.my.js
- package.json里面配置脚本
```
scripts:{"build": "webpack --config webpack-config.my.js"  //直接执行npm run build
}
```
- npm run build -- --config webpack-config.my.js

安装服务的开发依赖

npm install webpack-dev-server -D 不会真实的打包但会进行内存中的打包，把文件写在内存中会生成一个访问地址
运行命令 npx webpack-dev-server

devServer: {//开发环境下服务器的配置port: 3000,//修改端口号 默认8080progress: true,//内存打包时进度条contentBase: './build',//以dist文件为静态目录打开compress:true//启动压缩},

配置通过index.html模板页面把打包生成的js塞到模板中并打包之后塞到打包build目录下支持HTML

应用插件并安装插件npm install html-webpack-plugin -D

let HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [//数组 放着所有的webpack插件new HtmlWebpackPlugin({template: "./src/index.html",//打包模板路径filename: "index.html",//打包后的文件，默认indexminify: {//压缩打包后的html页面removeAttributeQuotes: true,// 移除属性的双引号collapseWhitespace: true,//打包后的html折叠},hash:true,//打包的js添加哈希戳})
]
output: {filename: "bundle.[hash:8].js",//打包后的文件名 加上hash让每次打包都生成不同的文件以避免缓存8代表值显示8位path: path.resolve(__dirname, 'build'),//打包后文件的路径  必须是绝对路径  __dirname当前项目的根目录 物理路径
},

css按模块的方式引入

css模块基本配置

module: {//配置模块rules: [//配置规则  css-loader处理css文件 负责解析@import这种语法//style-loader它是把css插入到head的标签  loader的特点：希望单一/**   loader的用法*   1.字符串只用一个loader  多个loadeer需要用数组  默认从右向左执行*   2.loader还可以写成对象  默认从下往上执行* */{test: /\.css$/,//检测css文件正则//use:'css-loader',字符串//use:['style-loader','css-loader']，数组use:[{loader: "style-loader",options: {insertAt:'top',//使模板里面的样式优先级最高}},'css-loader']},{//可以处理less文件   sass stylus node-sass sass-loader stylus stylus-loadertest: /\.less$/,//检测css文件正则//use:'css-loader',字符串//use:['style-loader','css-loader']，数组use:[{loader: "style-loader",options: {insertAt:'top',//使模板里面的样式优先级最高}},'css-loader',//解析路径以及@import'less-loader'//把less转换成css]}]
}

npm install mini-css-extract-plugin -D 抽离css样式插件

plugins: [//数组 放着所有的webpack插件new HtmlWebpackPlugin({template: "./src/index.html",//打包模板路径filename: "index.html",//打包后的文件，默认indexminify: {//压缩打包后的html页面removeAttributeQuotes: true,// 移除属性的双引号collapseWhitespace: true,//打包后的html折叠},hash:true,//打包的时候加上哈希戳}),new MiniCssExtractPlugin({ //抽离css样式文件filename:'css/main.css',//文件名   设置打包后的文件输出路径以及文件名})
],
module: {//配置模块rules: [//配置规则  css-loader处理css文件 负责解析@import这种语法//style-loader它是把css插入到head的标签  loader的特点：希望单一/**   loader的用法*   1.字符串只用一个loader  多个loadeer需要用数组  默认从右向左执行*   2.loader还可以写成对象  默认从下往上执行* */{test: /\.css$/,//检测css文件正则//use:'css-loader',字符串//use:['style-loader','css-loader']，数组use:[// {//  loader: "style-loader",//     options: {//        insertAt:'top',//使模板里面的样式优先级最高//  }// },MiniCssExtractPlugin.loader,//创建link标签引入'css-loader']},{//可以处理less文件   sass stylus node-sass sass-loader stylus stylus-loadertest: /\.less$/,//检测css文件正则//use:'css-loader',字符串//use:['style-loader','css-loader']，数组use:[// {//    loader: "style-loader",//     options: {//        insertAt:'top',//使模板里面的样式优先级最高//  }// },MiniCssExtractPlugin.loader,'css-loader',//解析路径以及@import'less-loader'//把less转换成css]}]
}

安装autoprefixer自动添加浏览器前缀 postcss-loader 处理autoprefixer的loader
npm install postcss-loader autoprefixer -D 自动添加浏览器前缀以及样式

module: {//配置模块rules: [//配置规则  css-loader处理css文件 负责解析@import这种语法//style-loader它是把css插入到head的标签  loader的特点：希望单一/**   loader的用法*   1.字符串只用一个loader  多个loadeer需要用数组  默认从右向左执行*   2.loader还可以写成对象  默认从下往上执行* */{test: /\.css$/,//检测css文件正则//use:'css-loader',字符串//use:['style-loader','css-loader']，数组use:[// {//  loader: "style-loader",//     options: {//        insertAt:'top',//使模板里面的样式优先级最高//  }// },MiniCssExtractPlugin.loader,//创建link标签引入'css-loader','postcss-loader'//解析css之前添加]},{//可以处理less文件   sass stylus node-sass sass-loader stylus stylus-loadertest: /\.less$/,//检测css文件正则//use:'css-loader',字符串//use:['style-loader','css-loader']，数组use:[// {//  loader: "style-loader",//     options: {//        insertAt:'top',//使模板里面的样式优先级最高//  }// },MiniCssExtractPlugin.loader,'css-loader',//解析路径以及@import'postcss-loader',//解析css之前添加'less-loader'//把less转换成css]}]
}
//并创建postcss.config.js文件
module.exports = {plugins:[require('autoprefixer')]//放用到的插件
}

npm install optimize-css-assets-webpack-plugin 压缩静态资源使用了这插件覆盖了之前js的压缩，也就是js不会压缩必须使用插件去压缩uglifyjs-webpack-plugin

optimization: {//优化项   生产环境下生效  开发环境下不生效minimizer:[new OptimizeCSSAssetsPlugin(),new UglifyJsPlugin({cache: true,//缓存parallel: true,//支持并发打包sourceMap:true//源码映射})]
},

babel-loader es6语法转换为es5语法的loader @babel/core babel核心模块 @babel/preset-env 高级语法转为低级语法 npm install @babel/plugin-proposal-class-properties -D 支持es7类的用法

{test:/\.js$/,use:{loader:'babel-loader',options: {//用babel-loader需要把es6语法转换为es5语法presets:[//预设'@babel/preset-env'],plugins:[["@babel/plugin-proposal-decorators", { "legacy": true }],["@babel/plugin-proposal-class-properties", { "loose" : true }]]}}
},

处理js语法以及校验

npm install --save-dev @babel/plugin-transform-runtime 开发环境下
npm install --save @babel/runtime 生产环境下

{test:/\.js$/,use:{loader:'babel-loader',options: {//用babel-loader需要把es6语法转换为es5语法presets:['@babel/preset-env'],plugins:[["@babel/plugin-proposal-decorators", { "legacy": true }],["@babel/plugin-proposal-class-properties", { "loose" : true }],"@babel/plugin-transform-runtime"]}},include:path.resolve(__dirname,'src'),//校验src下面的jsexclude:/node_modules/,//排除modules下面js
},

实例上面的方法默认不会帮解析 @babel/polyfill require('@babel/polyfill')
eslint校验js语法 npm install eslint eslint-loader

{test: /\.js$/,use: {loader: 'eslint-loader',options:{enforce:'pre'//previous  post 后面  强制在js转换之前执行校验语法}}},

webpack中第三方模块的使用

npm install jquery

第一种
//通过内联loader把jquery暴露出全局的$   npm install expose-loader
import $ from 'expose-loader?$!jquery'
//expose-loader  //暴露全的loader  内联的loader pre 前面执行的loader 普通loader  后者post  loader
console.log(window.$)
rules:
第二种
{test:require.resolve('jquery'),use:'expose-loader?$'
},
import $ from 'jquery'
第三种  在每个模块中注入$
let webpack = require('webpack') 通过webpack插件
new Webpack.ProvidePlugin({  在每个模块中注入$$:'jquery'
})
第四种   引入不打包
cdn引入 import $ from 'jquery'
//不属于plugin插件配置
external:{//引用一个库，但是又不想让webpack打包jquery:'$'
},

webpack打包图片

在js中创建图片来引入必须以模块的形式引入 require或者import引入

//file-loader  npm install file-loader 默认会在内部生产一张图片到build目录下,并把生产的图片的名字返回来
import logo from './a01.jpg' //把图片引入,返回的结果是一个新的图片地址
console.log(logo);
let image = new Image();
image.src = logo; //就是一个字符串
document.body.appendChild(image){test: /\.(png|jpg|gif)$/,use:'file-loader'},

在css引入背景图片

可以直接普通的去使用(background:url('./logo.png'))

html中通过img使用 npm install html-withimg-loader html-withimg-loader编译html页面中的img编译图片路径

{test: /\.html$/,use:'html-withimg-loader'},

转换为base64 url-loader npm install url-loader

{test: /\.(png|jpg|gif)$/,//做一个限制  当我们的图片 小于多少k的时候  用base64来转换  不然使用file-loader展示真实的图片use:{loader: 'url-loader',options: {limit:200*1024,//限制图片的大小outputPath:'/img/',//设置打包之后文件分类目录publicPath:"http://baidu.com" //配置图片的路径 可以在output里面统一配置，也可以单独配置}}},

四、打包多页面应用

1.基本配置以及应用

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {mode:'development',//多入口entry: {home: './src/index.js',other: './src/other.js'},output:{filename: '[name].js',path: path.resolve(__dirname,'bundle')},plugins: [ //new 两次new HtmlWebpackPlugin({template: "./index.html",filename: "home.html",chunks: ['home'] //代码块}),new HtmlWebpackPlugin({template: "./index.html",filename: "other.html",chunks: ['other','home'] //代码块}),]
}

sourceMap的使用

    //1. 源码映射  会单独生成一个sourcemap文件,出错了 辉表示当前报错的列和行  大切全//devtool: "source-map",//增加映射文件 可以帮助我们调试源代码//2. 不会产生单独的文件  但是会显示行和列//devtool: "eval-source-map",//3.不会产生列  但是是一个单独的映射文件//devtool: "cheap-module-source-map",//产生后可以保留起来调试//4. 不会产生文件 集成在打包后的文件中  不会产生列devtool: "cheap-module-eval-source-map",

watch的用法（监控代码变化并且实时编译）

watch: true,
watchOptions: {//监控选项poll: 1000,//每秒监控  问1000要不要更新aggregateTimeout:500,//防抖  我一直输入代码  500毫秒打包一次ignored: /node_modules/,//不需要进行监控文件
},

webpack小插件

1. cleanWebpackPlugin  //删除文件
new CleanWebpackPlugin('./bundle') //删除那个文件 再产生
2. copyWebpackPlugin  //拷贝文件
new CopyWebpackPlugin([  {from:'doc',   //从哪里copy到哪里去to:'./'}]) //删除那个文件 再产生
3. bannerPlugin   内置模块  需要引入webpack模块new webpack.BannerPlugin('make 2019')

跨域问题

        //第二种  我们前端只想单纯的模拟数据before(app){ //提供的方法 钩子app.get('/user',(req,res) => {res.json({name:"不不不11"})});},//第一种proxy: {'/api': {target: "http://localhost:3000",//配置一个代理  以api开头的都去道理服务上面找pathRewrite: {'/api': '' //替换api为空}},},服务端启动webpack//npm install webpack-dev-middleware -D  中间件  在服务端启动webpacklet webpack = require('webpack')let middle = require('webpack-dev-middleware')let config = require('./webpack.config.js')let compiler = webpack(config) //webpack经过处理app.use(middle(compiler))

resolve属性配置

resolve: { //解析 第三方包modules: [path.resolve('node_modules')],  //当前目录下查找  不回去上级目录下查找// alias: {//别名//   bootstrap:'bootstrap/dist/css/bootstrap.css'// },//mainFields:  ['style','main'],  //主入口  先找style style找不到再找main//mainFiles: [] , //入口文件的名字  默认找index.jsextensions: ['.css','.js','.json']}

定义环境变量

new webpack.DefinePlugin({//定义插件DEV:JSON.stringify('dev')})

区分不同环境

npm install webpack-merge -D  合并
创建开发环境 webpack.dev.js
let merge = require('webpack-merge')
let base = require('./webpack.base.js')  //开发环境以及生成环境共用的配置
module.exports = merge(base,{mode:"development",devServer:{  //生成环境配置}
})创建生成环境webpack.pro.js
let merge = require('webpack-merge')
let base = require('./webpack.base.js')  //开发环境以及生成环境共用的配置
module.exports = merge(base,{ //开发环境配置mode:"production",optimization:{}})

五、webpack优化

noParse:/jquery/, //不去解析jquery依赖库

module: {noParse:/jquery/, //不去解析jquery依赖库rules: [{test:/.\.js$/,exclude:/node_nodule/,//排除node_modules中的jsinclude:path.resolve('src'), //包含在src的jsuse: {loader: "babel-loader",options: {presets:["@babel/preset-env","@babel/preset-react"]}}}]}

IgnorePlugin 插件 webpack内置插件忽略插件

new Webpack.IgnorePlugin(/\.\/locale/,/moment/),  //只引入moment中中文语言包  忽略其他的

dllPlugin 动态链接库抽离第三方库不需要打包先独立的进行打包第三方库我们打包好的文件之后直接进入打包好的第三方库文件

创建webpack.config.react.js
let path = require('path')
let Webpack = require('webpack')
module.exports = {mode: "development",entry: ['react','react-dom'],  //要打包的第三方包名// entry: './src/test.js',output: {filename: '_dll_[name].js', //产生的文件名path: path.resolve(__dirname,'dist'),//library: 'ab',//打包后的文件返回值赋值给alibrary: '_dll_[name]',//打包后的文件返回值赋值给a   变量名与产生的文件名一致//libraryTarget:'commonjs' //模块输出 umd模式 var},plugins: [new Webpack.DllPlugin({name:"_dll_[name]",//name === librarypath:path.resolve(__dirname,'dist','manifest.json')  //产生清单的路径})]
}webpack.config.js
new Webpack.DllReferencePlugin({manifest: path.resolve(__dirname,'dist','manifest.json')
})

多线程打包 happypack 可以实现多线程来打包第三方插件

webpack.config.js
new Happypack({  //调用下面的loader去打包id:'js',use: [{loader: "babel-loader",options: {presets:["@babel/preset-env","@babel/preset-react"]}}]
})rules: [{test:/.\.js$/,// use: {//    loader: "babel-loader",//     options: {//        presets:[//             "@babel/preset-env",//           "@babel/preset-react"//      ]//     }// }use:'Happypack/loader?id=js'  //使用happypack/loader进行打包  并标识是js}
]

多页面打包时抽取公共代码

webpack.config.js
optimization: {splitChunks: { //分割代码块cacheGroups: {//缓存组common: {//公共的模块chunks: "initial",//提取公共代码的入口minSize: 0,//公用的字节大于0minChunks: 2,//公用的次数},vendor: {priority: 1,//权重  先抽第三方模块test: /node_modules/,  //把你抽离出来chunks: "initial",//提取公共代码的入口minSize: 0,//公用的字节大于0minChunks: 2,//公用的次数}}}},

懒加载

index.js
let button = document.createElement('button')
button.innerHTML = "hello"
button.addEventListener('click',function () {console.log("click");//es6 草案中的语法  jsonp实现动态加载文件  返回的是个promise  vue路由懒加载的实现原理  reactimport('./source.js').then(data => {console.log(data);})
})

热更新

webpack.config.js
plugins: [new HtmlWebpackPlugin({template: "./public/index.html",filename: "index.html"}),new Webpack.IgnorePlugin(/\.\/locale/, /moment/),  //只引入moment中中文语言包  忽略其他的// new Webpack.DllReferencePlugin({//      //  manifest: path.resolve(__dirname,'dist','manifest.json')//      // }),new Webpack.NamedModulesPlugin({ //指定模块更新  打印更新的模块路径}),new Webpack.HotModuleReplacementPlugin({ //热更新插件})],devServer: {port: 3000,open: true,contentBase: './dist',hot:true  //启用热更新},index.js
import str from './source'
console.log(str)if(module.hot){//支持热更新module.hot.accept('./source',() => {let str = require('./source')console.log(str);})}

webpack使用教程（二）相关推荐

Webpack入门教程二十九
133.在模板中以内联的形式引用script脚本,修改webpack.config.js文件,代码如下 var htmlWebpackPlugin = require("html-webpa ...
Webpack入门教程二
13.在根目录下创建webpack.config.js配置文件,配置文件内容如下 echo ... > webpack.config.js module.exports = {entry: __ ...
webpack基础教程
webpack基础教程一 webpack五大核心二 webpack处理css资源三 webpack处理less.scss.sass.styl资源四 webpack-module的详细配置五 ...
mars3d - Webpack打包教程
mars3d - Webpack打包教程 1.新建文件夹mars3d-webpack 2.初始化 npm,然后在本地安装 webpack,接着安装 webpack-cli(此工具用于在命令行中运行 ...
黄聪：Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级)
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级) 本章介绍的是企业库加密应用程序模块 ...
Konstrukt PHP REST框架教程二
Konstrukt PHP REST框架教程二入门 - 第2部分在本教程中,我们假设你已经完成了第一个教程,因为它的基础上产生的代码从该. 谈判的Content-Type 在大多数情况下会发出一 ...
Mac下Android studio 之NDK配置教程(二)
Mac下Android studio 之NDK配置教程(二) (一)简述从上一篇NDK配置教程(一) 中,我简单的阐述了MAC下NDK的基本解压和环境配置步骤. 本节我讲详细描述android s ...
python elasticsearch 入门教程(二) ---全文搜索
python elasticsearch 入门教程(二) ---全文搜索截止目前的搜索相对都很简单:单个姓名,通过年龄过滤.现在尝试下稍微高级点儿的全文搜索--一项传统数据库确实很难搞定的任务. ...
openlayers地图旋转_OpenLayers教程二：实现简单的地图显示
本文衔接上一篇文章:不睡觉的怪叔叔:OpenLayers教程二:实现简单的地图显示zhuanlan.zhihu.com 经过上一篇文章对OpenLayers的简单了解以后,现在让我们来实现一个简单的 ...
webpack 使用教程--实时刷新测试
学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...

webpack使用教程（二）

一、webpack安装(4.0)

二、webpack可以进行0配置

三、手动配置webpack 文件名 webpack.confifg.js

四、打包多页面应用

五、webpack优化

webpack使用教程（二）相关推荐

最新文章

热门文章