webpack详细介绍以及配置文件属性！

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
})
]