网站备案公司,设计公司企业计划书,400套商业网站的静态模板,如何创建网站的步骤获取全套webpack 4.x教程#xff0c;请访问瓦力博客在上一小节#xff0c;我们将开发环境和生产环境区分开来。这一小节#xff0c;我们来操作如何将样式文件的代码分割。1.安装yarn add mini-css-extract-plugin此插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建…获取全套webpack 4.x教程请访问瓦力博客在上一小节我们将开发环境和生产环境区分开来。这一小节我们来操作如何将样式文件的代码分割。1.安装yarn add mini-css-extract-plugin此插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMaps的按需加载。它建立在新的webpack v4功能(模块类型)之上并且需要webpack 4才能工作。注意:MiniCssExtractPlugin 目前不支持HMR support(热重载)2.提取cssbulid/plugins.jsconst srcPath require(./base/path);const config require(./base/config);const webpack require(webpack);const HtmlWebpackPlugin require(html-webpack-plugin); //生成html文件const { CleanWebpackPlugin } require(clean-webpack-plugin); //清除 const MiniCssExtractPlugin require(mini-css-extract-plugin); //css样式提取let plugins [new HtmlWebpackPlugin({title: 瓦力博客,template: srcPath.src /index.html //以src/index.html为编译模板}),new MiniCssExtractPlugin({filename: config.NODE_ENV development?[name.css]: ${srcPath.css}/[name].[hash].css,chunkFilename: config.NODE_ENV development?[id].css: ${srcPath.css}/[id].[hash].css}), //css提取new CleanWebpackPlugin(),new webpack.HotModuleReplacementPlugin()]module.exports plugins;build/module.jsconst srcPath require(./base/path);const config require(./base/config); const MiniCssExtractPlugin require(mini-css-extract-plugin);let _module {rules:[{test:/\.css$/,use:[config.NODE_ENV development?style-loader: MiniCssExtractPlugin.loader,{loader:css-loader,options:{importLoaders:1}},postcss-loader]},{test:/\.scss$/,use:[config.NODE_ENV development?style-loader: MiniCssExtractPlugin.loader,{loader:css-loader,options:{importLoaders:2}},sass-loader,postcss-loader]},{test: /\.less$/,use: [config.NODE_ENV development?style-loader: MiniCssExtractPlugin.loader,{loader:css-loader,options:{importLoaders:2}},less-loader,postcss-loader]},{test:/\.(png|svg|jpeg|jpg|gif)$/,use:[{loader:file-loader,options:{name:[name][sha512:hash:base64:7].[ext], //[path] 上下文环境路径outputPath: srcPath.images, //输出路径publicPath: config.NODE_ENV development?srcPath.images:srcPath.images //公共路径}},{loader: image-webpack-loader,options: {bypassOnDebug: true, // webpack1.xdisable: true, // webpack2.x and newer},},]},{test: /\.html$/,use:[{loader:html-loader,options:{arrts:[img:src,img:data-src],minimize:config.NODE_ENV development? false:false //是否压缩html}}]},{test: /(iconfont.svg)|\.(woff|woff2|eot|ttf|otf)$/,use:[{loader:file-loader,options:{name:[name].[ext], //[path] 上下文环境路径outputPath: srcPath.iconfont, //输出路径publicPath: config.NODE_ENV development? srcPath.iconfont: srcPath.iconfont, //公共路径}}]},{test: /\.js$/,exclude: /(node_modules|bower_components|lib)/,loader: babel-loader}]}module.exports _module;build/base/config.jslet _mode process.argv[process.argv.length - 1];let env _mode.replace(/--mode(.)/g,$1);let config {NODE_ENV: env development?development:production, //development 开发 production 线上publicPath: env development?./:./,apiUrl:http://www.waliblog.com,port: 9999}module.exports config;package.json{name: webpack,version: 1.0.0,description: webpack测试,sideEffects: [*.css,*.less,*.scss],main: index.js,author: wali,private: true,license: MIT,scripts: {dev: npx webpack-dev-server --colors --modedevelopment,prod: npx webpack --colors --modeproduction,build: npx webpack --colors --modedevelopment,analyse: npx webpack --profile --json stats.json --colors --modedevelopment},dependencies: {babel/core: ^7.4.5,babel/plugin-syntax-dynamic-import: ^7.2.0,babel/plugin-transform-runtime: ^7.4.4,babel/polyfill: ^7.4.4,babel/preset-env: ^7.4.5,babel/runtime: ^7.4.5,babel/runtime-corejs2: ^7.4.5,autoprefixer: ^9.5.1,babel-loader: ^8.0.6,clean-webpack-plugin: ^3.0.0,css-loader: ^2.1.1,extract-text-webpack-plugin: ^3.0.2,file-loader: ^3.0.1,html-loader: ^0.5.5,html-webpack-plugin: ^3.2.0,image-webpack-loader: ^4.6.0,json5-loader: ^2.0.0,less: ^3.9.0,less-loader: ^5.0.0,loadsh: ^0.0.4,lodash: ^4.17.11,mini-css-extract-plugin: ^0.7.0,node-sass: ^4.12.0,postcss-loader: ^3.0.0,sass-loader: ^7.1.0,style-loader: ^0.23.1,webpack: ^4.32.0,webpack-cli: ^3.3.2,webpack-dev-server: ^3.4.1},devDependencies: {webpack-bundle-analyzer: ^3.3.2}}index.jsimport ./assets/css/index.css;assets/css/index.cssh1{color: blue;}运行webpackyarn run prod打开dist/index.html,看到/assets/css/index.css文件样式生效了title欢迎来到瓦力博客从index.html文件中可以看到css文件被提取出来并且被引用。3.提取sass上面配置已经写了在plugins.js和module.js文件中配置了这里就简单的验证一下修改index.jsimport ./assets/sass/index.scss;assets/sass/index.scssbody{h1{transform: translate(100px, 100px);}}运行webpackyarn run prod打开dist/index.html发现欢迎来到瓦力博客几个字发生偏移说明/assets/sass/index.scss样式已经生效4.提取less上面配置已经写了在plugins.js和module.js文件中配置了这里就简单的验证一下修改index.jsimport ./assets/less/index.less;assets/less/index.lessbody{h1{transform: rotate(90deg);background: red;text-align: center;}}运行webpackyarn run prod打开dist/index.html发现欢迎来到瓦力博客几个字旋转90度背景变红字体居中说明/assets/less/index.less样式已经生效5.生产环境css压缩安装optimize-css-assets-webpack-pluginyarn add optimize-css-assets-webpack-pluginoptimization.js const config require(./base/config); const OptimizeCssAssetsPlugin require(optimize-css-assets-webpack-plugin);let optimization {usedExports: true,splitChunks: {chunks: all,minSize: 30000,maxSize: 0,minChunks: 1,maxAsyncRequests: 5,maxInitialRequests: 3,automaticNameDelimiter: ~,name: true,cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10},default: {minChunks: 2,priority: -20,reuseExistingChunk: true}}}}if(config.NODE_ENV ! development){optimization[minimizer] [new OptimizeCssAssetsPlugin({})]}module.exports optimization运行开发环境yarn run build发现没有发生什么改变样式都在head标签内运行生产环境yarn run prod发现dist目录下有css目录生成打开css文件看到css被压缩了。6.总结测试这小节其实遇到几个问题小菜写出来调试这小节的测试命令都变成yarn run prod是测试生产环境下webpack配置生产环境下css,less,scss都会被压缩去注释index.html文件也会被压缩去注释还要添加域名。这样一来从生成的文件方面就不容易看出webpack到底是否配置正确。所以小菜将config.js中修改publicPath: env development?./:./,就是生成后index.html文件能直接在本地打开而不报错。build/module.js修改minimize:config.NODE_ENV development? false:false //是否压缩html生成后index.html文件不要被压缩还保留树形结构便于查找less和scss文件样式不起作用小菜起初测试css文件发现打包后css样式被提取出来样式也生效了但是换成import ./assets/less/index.less;//或import ./assets/sass/index.scss;时在运行打包命令时样式没有被提取出来。后来经过认真分析发现/webpack/2019/05/24/webpack-10.html一节中配置了Tree Shaking。Tree shaking作用就是当我在index.js文件中使用import ./assets/less/index.less写法时会检测在js文件中是否使用了引入来的less很明显在index.js文件中没有使用只是单纯的引入所以Tree shaking就会自动帮我们过滤掉这行代码就导致最终生成的js文件中没有样式也就提取不出来样式了。看了上面的解释有的小伙伴可能会问import ./assets/css/index.css也在index.js文件中只引用没有使用为什么css文件中的样式就能够生效呢原因还是在/webpack/2019/05/24/webpack-10.html一节中小菜在package.json中配置了css没有配置less,scss。sideEffects: [*.css,*.less,*.scss],当我们配置*.css,*.less,*.scss后在Tree shaking时webpack就会知道忽略css,less,scss所有文件即使在js文件中css,less,scss只引用没有使用也不要删除这行代码。7.代码回滚build/module.js- minimize:config.NODE_ENV development? false:false //是否压缩html minimize:config.NODE_ENV development? false:true //是否压缩htmlbuild/base/config.jslet _mode process.argv[process.argv.length - 1];let env _mode.replace(/--mode(.)/g,$1);let config {NODE_ENV: env development?development:production, //development 开发 production 线上-publicPath: env development?./:./,publicPath: env development?./:http://www.waliblog.com/,apiUrl:http://www.waliblog.com,port: 9999}module.exports config;
