您现在的位置是:网站首页> 内容页

webpack+ES6+Sass搭建多页面应用

  • 金佰利国际官网
  • 2019-03-31
  • 380人已阅读
简介webpack同之前的gulp相比,gulp属于非模块化打包工具,webpack属于模块化打包工具,两者的优劣这里不做过多分析(可自行百度)。目的:是为了分享一下使用过程中,用到的插件

webpack同之前的gulp相比,gulp属于非模块化打包工具,webpack属于模块化打包工具,两者的优劣这里不做过多分析(可自行百度)。

目的:是为了分享一下使用过程中,用到的插件、loader、遇到的各种问题以及解决办法,最后会附上最终代码。

在这个项目中,用webpack打包css、scss、js、图片文件、jquery、第三方插件、字体图标,编译es6、压缩html、压缩js、压缩css,基本涵盖了常用的东西。

代码结构如下

下面单独说几个难点

1、打包多页面,使用到的插件是html-wepack-plugin,html-loader,也就是你有多少个页面,就有多少个入口,也就写多少个模版文件。当然,页面过多时,可以考虑遍历处理。

//引入路径插件const path = require("path")//引入导出html插件const HtmlWebpackPlugin = require("html-webpack-plugin")const config = { //入口 entry:{ home:"./pages/lawSearchHomepage.js" list:"./pages/lawSearchList.js" } //出口 output:{ filename: "[name].bundle.js" path: path.resolve(__dirname"build") }

//插件 plugins: [ //html单独导出插件——首页 new HtmlWebpackPlugin({ filename:"lawSearchHomepage.html"//输出后的文件名称 template:"./pages/lawSearchHomepage.html"//模版页面路径 favicon:"./pages/images/favicon.ico"//页签图标 chunks:["home"]//需要引入的js文件名称 inject: true hash:true//哈希值 minify: {//压缩 removeComments: true collapseWhitespace: true } }) //html单独导出插件——列表页 new HtmlWebpackPlugin({ filename:"lawSearchList.html" template:"./pages/lawSearchList.html" favicon:"./pages/images/favicon.ico" chunks:["list"] inject: true hash:true minify: { removeComments: true collapseWhitespace: true } }) ] }module.exports = config

2、单独打包css,使用到的插件extract-text-webpack-plugin,loader有style-loader、css-loader、sass-loader、node-sass,因为每个页面要引入相对应的css文件,所以,在js入口文件里通过require("./lawSearchHomepage.scss")引如对应的scss文件,打包后css文件会单独打包,并通过link的形式引入html

//引入导出css插件const ExtractTextPlugin = require("extract-text-webpack-plugin")//loader{//CSS test:/.css/ use:ExtractTextPlugin.extract({ use:["css-loader"] })}{//Sass test:/.scss/ use:ExtractTextPlugin.extract({ fallback:"style-loader" use:["css-loader""sass-loader"] })}//plugins//将css单独打包插件new ExtractTextPlugin({ filename:"[name].css"//制定编译后的文件名称 allChunks:true//把分割的块分别打包})

3、处理es6,安装babel、babel-loader@7(因为下面压缩js,其他版本报错)、babel-core、babel-preset-es2015(也是为了解决压缩js报错)

//loader{//ES6 test:/.js$/ loader:"babel-loader" // exclude:__dirname+"node_modules"//不对这个进行babel转换,这里边已经打包好,这样能减少打包时间 // include:__dirname+"src"这里的src是你要编译的js文件的目录 exclude:path.resolve(__dirname"node_modules") include:path.resolve(__dirname"pages") query:{//若在package.json中定义了这个presets,则这边可以删掉 presets:["es2015"] }}

4、处理jquery,安装expose-loader

第一种方法可以通过在js里require("expose-loader?$!jquery")引入jquery

第二种通过loader

//loader{//Jquery test: require.resolve("jquery") use: [{ loader: "expose-loader" options: "jQuery" }{ loader: "expose-loader" options: "$" }]}

5、压缩css,使用插件optimize-css-assets-webpack-plugin,安装cssnano

//引入压缩css的插件const optimizeCss = require("optimize-css-assets-webpack-plugin")//引入cssnano插件const cssnano = require("cssnano")//pluginsplugins:[ new optimizeCss({ assetNameRegExp: /.style.css$/g cssProcessor: cssnano cssProcessorOptions: { discardComments: { removeAll: true } } canPrint: true }) ]//压缩优化css不写这个css还是没压缩,不知道为啥optimization: { // minimize: true minimizer: [new optimizeCss({})]}

6、压缩js,一般的情况下,js默认就是压缩状态,但是在压缩完css后,js就不是压缩的了,所以还是处理一下,编译更快

用的插件uglifyjs-webpack-plugin

//引入js压缩插件const uglifyjs = require("uglifyjs-webpack-plugin")//pluginsnew uglifyJs()

我的package.json中安装的插件

"devDependencies": { "babel": "^6.23.0" "babel-core": "^6.26.3" "babel-loader": "^7.1.5" "babel-preset-es2015": "^6.24.1" "clean-webpack-plugin": "^0.1.19" "css-loader": "^1.0.0" "cssnano": "^4.1.7" "expose-loader": "^0.7.5" "extract-text-webpack-plugin": "^4.0.0-beta.0" "file-loader": "^2.0.0" "font-awesome-webpack": "^0.0.5-beta.2" "html-loader": "^0.5.5" "html-webpack-plugin": "^3.2.0" "jquery": "^3.3.1" "node-sass": "^4.9.4" "optimize-css-assets-webpack-plugin": "^5.0.1" "postcss-loader": "^3.0.0" "sass-loader": "^7.1.0" "style-loader": "^0.23.1" "typeahead.js": "^0.11.1" "uglifyjs-webpack-plugin": "^2.0.1" "url-loader": "^1.1.2" "webpack": "^4.23.1" "webpack-cli": "^3.1.2" "webpack-dev-server": "^3.1.10" }

webpack.config.js里的代码(完整版)

//引入路径插件const path = require("path")//引入导出html插件const HtmlWebpackPlugin = require("html-webpack-plugin")//引入清除插件const CleanWebpackPlugin = require("clean-webpack-plugin")//引入导出css插件const ExtractTextPlugin = require("extract-text-webpack-plugin")//引入webpackconst webpack = require("webpack")//引入压缩css的插件const optimizeCss = require("optimize-css-assets-webpack-plugin")//引入cssnano插件const cssnano = require("cssnano")//引入js压缩插件const uglifyjs = require("uglifyjs-webpack-plugin")//webpack配置内容const config = { //入口 entry:{ home:"./pages/lawSearchHomepage.js" list:"./pages/lawSearchList.js" } //便于调试 devtool:"inline-source-map" //服务 devServer:{ contentBase:"./build/lawSearchHomepage.html" } //loader模块 module:{ rules: [ {//ES6 test:/.js$/ loader:"babel-loader" // exclude:__dirname+"node_modules"//不对这个进行babel转换,这里边已经打包好,这样能减少打包时间 // include:__dirname+"src"这里的src是你要编译的js文件的目录 exclude:path.resolve(__dirname"node_modules") include:path.resolve(__dirname"pages") query:{//若在package.json中定义了这个presets,则这边可以删掉 presets:["es2015"] } } {//Jquery test: require.resolve("jquery") use: [{ loader: "expose-loader" options: "jQuery" }{ loader: "expose-loader" options: "$" }] } {//CSS test:/.css/ use:ExtractTextPlugin.extract({ use:["css-loader"] }) } {//Sass test:/.scss/ use:ExtractTextPlugin.extract({ fallback:"style-loader" use:["css-loader""sass-loader"] }) } {//处理模块html test: /.html$/ use: "html-loader" } {//图片 test: /.(jpg|png|gif)$/ use: { loader: "file-loader" options: { outputPath: "images" } } } //字体图标 { test: /.(eot|svg|ttf|woff|woff2)w*/ loader: "file-loader" } ] } //插件 plugins: [ //清空build文件下的多余文件 new CleanWebpackPlugin(["build"]) //将css单独打包插件 new ExtractTextPlugin({ filename:"[name].css"//制定编译后的文件名称 allChunks:true//把分割的块分别打包 }) //html单独导出插件——首页 new HtmlWebpackPlugin({ filename:"lawSearchHomepage.html"//输出后的文件名称 template:"./pages/lawSearchHomepage.html"//模版页面路径 favicon:"./pages/images/favicon.ico"//页签图标 chunks:["home"]//需要引入的js文件名称 inject: true hash:true//哈希值 minify: {//压缩 removeComments: true collapseWhitespace: true } }) //html单独导出插件——列表页 new HtmlWebpackPlugin({ filename:"lawSearchList.html" template:"./pages/lawSearchList.html" favicon:"./pages/images/favicon.ico" chunks:["list"] inject: true hash:true minify: { removeComments: true collapseWhitespace: true } }) //压缩css new optimizeCss({ assetNameRegExp: /.style.css$/g cssProcessor: cssnano cssProcessorOptions: { discardComments: { removeAll: true } } canPrint: true }) //压缩js new uglifyjs() ] //压缩优化css optimization: { // minimize: true minimizer: [new optimizeCss({})] } //出口 output:{ filename: "[name].bundle.js" path: path.resolve(__dirname"build") }}module.exports = config

如果在打包过程中报模块没有定义错误,那就再安装一次,实在不行,直接删了node_modules文件,重新npm install一下。

 

文章评论

Top