webpack4.x连载之webpack4.x配置css单独分离打包以及业务和类库代码分离打包

css单独分离打包需安装插件extract-text-webpack-plugin

安装 cnpm install extract-text-webpack-plugin@next --save-dev

修改三个配置文件：

这个文件的改动只需把之前配置的css的loader配置删掉即可

//是nodejs的一个基本包，用来处理路径的，在打包项目时用绝对路径，防止出错

constpath=require("path");

constwebpack= require("webpack");

//如果没有index.html入口文件的情况,可以使用这个插件

constHTMLPlugin=require("html-webpack-plugin");

//以前直接vue-loader就可以，现在必须导入这个模块，并配置这个插件才能正常编译.vue文件

constVueLoaderPlugin= require('vue-loader/lib/plugin');

module.exports={

mode:"development",

//入口文件的配置项

//path.join就是把dirname和后面的路径拼接起来，形成绝对路径

entry:path.join(__dirname,"src/main.js"),

//出口文件的配置

output:{

path:path.join(__dirname,"dist"),

filename:"bundle.js"

},

plugins: [

newVueLoaderPlugin(),

//调用html-webpack-plugin插件

newHTMLPlugin()

],

module:{

rules:[

{

test:/\.vue$/,

use:['vue-loader']

},

{

test:/\.(jpg|png|gif)$/,

use:['url-loader']

},

{

test:/\.js$/,

exclude:/node_modules/,

use: {

loader:'babel-loader',

options: {

presets:['env'],

plugins:"transform-runtime"

//include表示哪些目录中的 .js 文件需要进行 babel-loader

//exclude表示哪些目录中的 .js 文件不要进行 babel-loader

constwebpack= require("webpack");

baseWebpackConfig.mode="development";

//帮助在页面上调试代码,在项目里使用的是.vue的文件开发模式,使用的也是es6代码

//这些代码在浏览器里是不能直接运行的,如果直接去调试浏览器代码是经过编译的

//所以需要使用source-map去进行代码的映射,当在浏览器调试的时候还是自己编写的源码

//这样更容易定位到错误,webpack提供了devtool

baseWebpackConfig.devtool="source-map";

// 服务配置

baseWebpackConfig.devServer= {

port:"9900",

overlay:{

errors:true//当webpack编译过程中出现任何错误,让它显示在网页上面

},

open:false,//启动webpack编译的时候自动打开浏览器

hot:true//只刷新当前组件的代码不刷新整个页面

};

//设置hot后需要加相关插件

//启动hot功能的插件

newwebpack.HotModuleReplacementPlugin(),

);

// 区分环境,在开发环境下css文件使用下面的配置

test:/\.css$/,

use:[

"style-loader",

"css-loader"

]

});

module.exports=baseWebpackConfig;

增加了在生产环境中，分离打包css以及业务和类库代码的配置

constpath=require("path");

constwebpack= require("webpack");

//css单独分离打包插件

constExtractPlugin=require("extract-text-webpack-plugin");

baseWebpackConfig.mode="production";

//类库文件分离打包,改变entry和output的配置

baseWebpackConfig.entry={

//把main.[chunkhash:8].js中业务代码和类库代码分开打包

//生成app.[XXX].js和vendor[XXX].js

//业务代码

app:path.join(__dirname,"src/main.js"),

//类库代码

//这里的属性vendor需与splitChunks的属性vendor一致

vendor:["vue"]

};

//css单独分离打包配置

"test":/\.css/,

use:ExtractPlugin.extract({

fallback:"style-loader",

use:[

"css-loader"

]

})

});

...[

//在这里指定输出css文件的名字

newExtractPlugin("styles.[chunkhash:8].css"),

]

);

//类库代码单独分离打包配置

baseWebpackConfig.optimization= {

splitChunks: {

cacheGroups: {

commons: {

chunks:'initial',

minChunks:2,

maxInitialRequests:5,

minSize:

},

vendor: {

test:/node_modules/,

chunks:'initial',

name:'vendor',

priority:10,

enforce:true

}

}

},

//把生成在app.js中的相关的webpack代码打包到runtime.js中

//生成runtime.[XXX].js

runtimeChunk:true

};

module.exports=baseWebpackConfig;

// 这种带哈希值的文件名，可以帮助实现静态资源的长期缓存，在生产环境中非常有用。

// * [hash]。hash值是特定于整个构建过程的。

// * [chunkhash]。hash值是特定于每一个文件的内容的。