1、webpack简单介绍
(1)webpack是一个用于实现前端模块化开发工具，可帮助我们自动打包编译成浏览器能够识别的代码 ；同时支持commonjs规范 以及es6的import规范； 同时具备各种常见语言编译(需要安装插件和loader)等功能。
(2)在使用webpack时 需要使用配置文件 ，名字如下: webpack.config.js
(3)安装 npm i webpack@3.11.0 -g，需要安装的本地web服务器 webpack-dev-server 版本号为: 2.9.7，在webpack.config.js 文件中对devServer属性进行配置，然后运行命令 webpack-dev-server --inline 启动即可，注意 webpack 和webpack-dev-server 需要全局安装
(4)webpack 配置:入口、出口、规则、插件
(5)在使用html-webpack-plugin 时 由于该模块依赖于webpack, 所以 在项目本地还需要安装一个webpack, 版本同样时3.11.0
(6) 命令 webpack-dev-server --inline 的作用仅为在本地预览开发效果, 本身并不包含编译的功能 ,如果需要将开发完成的代码上线 需要执行webpack 才能将代码编译到dist目录当中
(7)提取样式代码到单独的文件中
第一步 安装提取器 extract-text-webpack-plugin 第二步 配置loader loader:Ext.extract("xxx-loader") 第三步 配置输出文件名 plugins : [new Ext("xxx.css")]
(8)__filename变量：node.js中，在任何模块文件内部，可以使用__filename变量获取当前模块文件的带有完整绝对路径的文件名。
__dirname ：获得当前文件所在目录的完整目录名
2、配置文件属性
const path = require("path"); // node 模块 处理路径逻辑
const htmlWebpackPlugin = require("html-webpack-plugin"); //该模块用于自动复制html文件到dist当中，操作HTML
const openBrowserWebpackPlugin = require("open-browser-webpack-plugin"); // 打开浏览器
const extractTextWebpackPlugin = require("extract-text-webpack-plugin") // 安装提取器，抽离样式 样式独立出去
module.exports = {
entry:[ "./src/main.js"], //声明项目入口文件 entry : __dirname + "/src/main.js",
output:{ //配置编译后的文件
path:path.resolve(__dirname,'dist'),
filename:"js/[name].[hash:8].js", // 生成 hash规则解密解析的长度为8 的随机字符串 阻止浏览器缓存
publicPath:"", // 公共路径 上线需要配置
},
//output : { //配置编译后的文件
// path : __dirname + "/dist", //配置文件所在目录
//filename : "index.js" //配置文件名
},
devtool:"source-map", //开启资源地图模式 方便调试 让浏览器控制台能够准确指向编译前是哪个文件报错
resolve:{
alias:{ // 别名
'vue':'vue/dist/vue.js'
}
},
module:{
rules:[
{
test:/.js$/,
exclude:/node_modules/,
use:['babel-loader']
},
{
test:/.(png|gif|svg|jpg|woff|woff2|eot|ttf)??.*$/,
use:["url-loader?limit=8192&name=font/[hash:8].[name].[ext]"] // 8M ext扩展名
},
{
test:/.(css|scss)$/,
use:extractTextWebpackPlugin.extract({
fallback:"style-loader", // 转化为 node 风格代码
use:[ "css-loader", // css 转化为 commonJs模块
{
loader:"postcss-loader", // 模块
options:{
plugins:function(){
return [
require("cssgrace"), // 美化 css
require("autoprefixer")() // 自动补全 实现兼容
]
}
}
},
"sass-loader" // 编译 scss 为 css 代码
],
})
},
{
test:/.(css|less)$/,
use:extractTextWebpackPlugin.extract({
fallback:"style-loader", // 转化为 node 风格代码
use:[ "css-loader", // css 转化为 commonJs模块
{
loader:"postcss-loader", // 模块
options:{
plugins:function(){
return [
require("cssgrace"), // 美化 css
// require('postcss-px2rem-exclude')(
// {
// remUnit:100,
// exclude:/element-ui/i, // 排除 mint-ui 不需要进行 rem 转换
// }
// ), // px 转 rem
require("autoprefixer")() // 自动补全 实现兼容
]
}
}
},
"less-loader" // 编译 scss 为 css 代码
],
})
},
{
test:/.vue$/,
loader:'vue-loader',
options:{
loaders:[
{'css':'style-loader!css-loader'},
{'scss':'style-loader!css-loader!sass-loader'},
{'less':'style-loader!css-loader!less-loader'},
]
}
}
]
},
devServer:{
contentBase:path.join(__dirname,"dist"), // contentBase : __dirname + "/dist/", //指定本地web服务根路径
compress:true,
hot:true,
inline:true,//开启自动刷新
host:"0.0.0.0",
port:7000,//设置端口号
// open:true,
publicPath:"",
proxy:{ // 代理
},
// historyApiFallback:true // 处理 history 路由模式
},
plugins:[
new htmlWebpackPlugin({
template:"./src/index.html", //声明 编译 HTML 文件
inject:true, // 自动注入 css/js link script
}),
new openBrowserWebpackPlugin({url:"http://localhost:7000"}),
new extractTextWebpackPlugin({
filename:'css/app.[hash:8].css',
allChunks:true , // 抽离所有的数据
disable:false // true 无法样式抽离
})
]
}
3、react配置webpack文件
let webpack= require("webpack")
let Hwp = require("html-webpack-plugin")
let Ext = require("extract-text-webpack-plugin")
module.exports = {
entry : __dirname + "/src/main.js",
output : {
path : __dirname + "/dist/",
filename : "app.js",
publicPath : "/"
},
devtool : "source-map",
devServer : {
contentBase : __dirname + "/dist/",
port : 3000,
inline : true,
publicPath : "/",
historyApiFallback : true,
disableHostCheck : true,
proxy : {
"/zhuiszhu" : {
target : "http://39.105.136.190:3000"
}
}
},
module : {
rules : [
{test : /.js$/ , exclude : /node_modules/ ,loader : "babel-loader"},
{test : /.less$/,loader :Ext.extract("css-loader!less-loader")},
{test : /.css$/,loader :Ext.extract("css-loader")},
]
},
plugins : [
new webpack.ProvidePlugin({
React : "react"
}),
new Hwp({
template : "index.html",
filename : "index.html",
inject : true
}),
new Ext("app.css")
]
}
4、vue配置webpack文件
let Hwp = require("html-webpack-plugin")
let Ext = require("extract-text-webpack-plugin")
module.exports={
entry:__dirname+"/src/main.js",
output:{
path:__dirname+"/dist/",
filename:"app.js"
},
devtool:"source-map",
devServer:{
contentBase:__dirname+"/dist/",
port:3000,
inline:true,
proxy:{
"/zhuiszhu":{
target:"http://39.105.136.190:3000"
}
}
},
resolve:{
alias:{
"vue":"vue/dist/vue.js"
}
},
module:{
rules:[
{test:/.css$/,loader:Ext.extract("css-loader")},
{test:/.less$/,loader:Ext.extract("css-loader!less-loader")},
{test:/.html$/,loader:"string-loader"},
{test:/.js$/,exclude:/node_modules/,loader:"babel-loader"},
]
},
plugins:[
new Hwp({
template:"src/index.html",
filename:"index.html",
inject:true
}),
new Ext("app.css")
]
}
5.补充webpack知识讲解
webpack是一个用于实现前端模块化开发工具 可帮助我们自动打包编译成浏览器能够识别的代码
同时支持commonjs规范 以及es6的import规范
同时具备各种常见语言编译(需要安装插件和loader)等功能
在使用webpack时 需要使用配置文件
名字如下: webpack.config.js
1 安装 : 全局安装
推荐使用版本: 3.11.0
npm i webpack@3.11.0 -g
运行命令
webpack
配置文件属性
entry : 配置入口文件
output : {
path : "", //输出路径
filename : "" //输出文件名
},
devtool : "source-map" , //开启资源地图模式
devServer : { //webpack-dev-server 服务相关配置
contentBase : "",//服务器根目录,
port : 3000,//端口号,
inline : true,//自动刷新,
proxy : { //配置服务器代理
"pathname" : {
target : "目标服务器地址"
}
}
},
module : {
rules : [ //loader相关配置
{
test: xxx,// 正则对象,匹配相应文件
exclude : yyy,// 正则对象,过滤掉不需要编译的部分
loader : "", //需要使用到的loader
}
]
},
plugins : [ //配置各种插件
]
}
常见插件用法
全局变量:
let webpack = require("webpack")
plugins : [
new webpack.ProvidePlugin({
React : "react"
})
]
css文件提取
let Ext = require("extract-text-webpack-plugin")
loader配置:
{test:/.css$/,loader:Ext.extract("css-loader")}
plugins : [
new Ext("app.css")
]
html文件自动复制
let Hwp = require("html-webpack-plugin")
plugins : [
new Hwp({
template : "index.html" ,//源html文件路径
filename : "index.html",//自动输出到output所指向的目录
inject : true , //自动引入所需要的标签 比如link 比如script
})
]