webpack多页应用框架从零搭建

作者: smaVivian | 来源:发表于2019-11-22 11:32 被阅读0次

我的github地址：https://github.com/SmaVivian/webpack4-multi-page.git
v1.0.0版本 https://github.com/SmaVivian/webpack4-multi-page.git

引入css文件：除相对路径外也可使用alias

// webpack.config.base.js
resolve: {
    extensions: [".js", ".css", ".json"],  // 自动补全的扩展名
    alias: {
      "@": resolve('../src'),
    }
  }

// index.js文件：
import '@/style/index.css'

css-loader和style-loader是干什么用的呢？

module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
}

引用《入门webpack》中的原文：css-loader使你能够使用类似@import和url（...）的方法实现require的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。

启动时指定页面

devServer: {
    contentBase: path.resolve(__dirname, '../src'), //告诉服务器从哪里提供内容, 最好设置成绝对路径
    index: 'page/index.html',  // 启动的时候，就在的页面
}

html跳转路径问题：使用绝对路径

// index.html
<a href="/page/index1.html">index1</a>

css3样式前缀：postcss-loader+autoprefixer

安装
npm install --save-dev postcss-loader autoprefixer
新增postcss.config.js文件

module.exports = {
  parser: 'postcss',
  plugins: {
    'autoprefixer': {}
  }
}

package.json中添加

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

webpack.conf.dev.js

{
    test: /\.css$/,
    use: [
        'style-loader',
        { loader: 'css-loader', options: { sourceMap: true } },
        { loader: 'postcss-loader', options: { sourceMap: true } }
    ]
},

图片引入三种方式

css：url-loader
css文件中图片路径问题：修改publicPath

// webpack.config.base.js
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 8192, // 8k
            name: 'images/[name].[hash:7].[ext]', // 回退使用file-loader时的名称
            publicPath: '/',  // 解决开发环境css文件引入图片路径问题，根据文件结构而修改
            // outputPath: 'images/', // 生产环境
            fallback: 'file-loader',  // 当超过8192byte时，会回退使用file-loader
          }
    }]
},

html：处理html中引入的图片路径问题，打包html中的图片：安装html-loader
npm install --save-dev html-loader

// webpack.config.prod.js
module: {
    rules: [
        {
            test: /\.html$/,
            use: {
                loader: 'html-loader'
            }
        },
    ]
},

js

// js引入b文件夹下的图片 es6语法测试
let img = document.querySelector('#myImg');
img.src = require('./../../images/b/b.png');

引入第三方库

https://segmentfault.com/a/1190000016180138

npm i jquery -S
webpack.config.base.js

const webpack=require('webpack');    //引入webpack模块，ProvidePlugin是webpack身上的一个插件
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          // jQuery: 'jquery'
        })
    ]
}

提取第三方库,按需提取js: optimization 优化

// webpack.config.prod.js
module.exports = {
  optimization: {
    splitChunks: {
      // chunks: 'all',
      // minSize: 30000,//模块最小体积
      // minChunks: 1,//模块最小被引用的次数
      // maxAsyncRequests: 5,//按需加载的最大并行请求数
      // maxInitialRequests: 3,//一个入口最大并行请求数
      // automaticNameDelimiter: '~',//文件连接符
      // name: true,
      cacheGroups: {
        jquery: {   // 抽离第三方插件
          test: /jquery/,   // 指定是node_modules下的第三方包
          chunks: 'initial',
          name: 'jquery',  // 打包后的文件名，任意命名    
          // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
          priority: 10
        },
      }
    }
  }
}

打包压缩css文件

注意：webpack默认会压缩js, 压缩css文件需要覆盖默认的minimizer，所以js也需要手动压缩
npm i uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin -D

// webpack.config.prod.js
optimization: {
    minimizer: [ // 用于配置 minimizers 和选项
      new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },

babel-loader 翻译 js 文件及、es6语法、处理兼容等

npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime

// webpack.config.base.js
rules: [
      {
        // test: /\.js$/,
        test: /\.m?js$/,
        include: [config.srcPath],        // 在源文件目录查询
        exclude: [config.assetsSubDirectory, config.node_modulesPath], // 忽略第三方的任何代码
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      },
]

https://www.qdskill.com/tools/webpackjs/4819.html
阮一峰老师的webpack教程地址：https://github.com/ruanyf/webpack-demos
https://dailc.github.io/2017/03/13/webpackfreshmanualAndBug.html