如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)

// 此处建议安装局部依赖，安装全局依赖可能会出现版本问题
npm install -D webpack webpack-cli

npm install -D babel-loader @babel/core @babel/preset-env 

const path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: {
  main: './src/index.js',
 },
 output: {
  path: path.resolve(__dirname, '../dist'),
 },
 module: {
  rules: [
   // 将es6编译成es5
   { 
    test: /\.jsx?$/, // ?表示x有0个或一个
    exclude: /node_modules/, // 不编译某个目录下的文件
    include: path.resolve(__dirname, '../src'), // 只在include包含的目录下进行loader编译
    use: [
     "babel-loader",
    ]
   },
  ]
 }
}

npm install -D html-webpack-plugin

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const template = path.resolve(__dirname, '../public/index.html');

module.exports = {
 entry: {
  main: './src/index.js'
 },
 output: {
  path: path.resolve(__dirname, '../dist')
 },
 module: {
  rules: [
   // 将es6编译成es5
   { 
    test: /\.jsx?$/, // ?表示x有0个或一个
    exclude: /node_modules/, // 不编译某个目录下的文件
    include: path.resolve(__dirname, '../src'), // 只在include包含的目录下进行loader编译
    use: [
     "babel-loader",
    ]
   },
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   template,
   filename: 'index.html'
  })
 ]
}

npm install -D webpack-merge

const merge = require('webpack-merge');
const base = require('./webpack.base');

module.exports = merge({
 mode: 'production',
 output: {
  filename: 'js/[name]_[contenthash].js', // 入口和内容hash组成的文件名，也可以是hash
		chunkFilename: 'js/[name]_[contenthash].chunk.js'
 }
}, base)

"scripts": {
 "build": "webpack --config ./build/webpack.prod.js"
 }

// index.js
let name = 'xuxi';
let say = (name) => {
 alert(name)
};
say(name);

npm run build

npm install --save-dev css-loader style-loader

module: {
  rules: [
   // 将es6编译成es5
   { 
    test: /\.jsx?$/, // ?表示x有0个或一个
    exclude: /node_modules/, // 不编译某个目录下的文件
    include: path.resolve(__dirname, '../src'), // 只在include包含的目录下进行loader编译
    use: [
     "babel-loader",
    ]
   },
   // 加载css
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
   },
  ]
 }

// app.css
#root {
 background-color: #f0c;
 height: 100px;
}

// index.js
import './styles/app.css'

npm isntall mini-css-extract-plugin -D

// webpack.prod.js
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const base = require('./webpack.base');

module.exports = merge({
 mode: 'production',
 output: {
  filename: 'js/[name]_[contenthash].js', // 入口和内容hash组成的文件名，也可以是hash
		chunkFilename: 'js/[name]_[contenthash].chunk.js'
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [ // loader解析的顺序是从下到上，从右到左的顺序
     {
      loader: MiniCssExtractPlugin.loader,
      options: {
       filename: '[name].css',
       chunkFilename: '[name].css',
       publicPath: '../' //****最后打包的时候替换引入文件路径
      },
     },
     // 'style-loader', 使用MiniCssExtractPlugin时就不能使用style-loader了
     {
      loader: 'css-loader',
      options: {
       importLoaders: 2 //该方式可以让@import引入的css文件再次执行一边css打包loader
      }
     },
    ]
   }
  ]
 },
 plugins: [
  new MiniCssExtractPlugin({
   // Options similar to the same options in webpackOptions.output
   // both options are optional
   filename: 'css/[name]_[hash].css',
   chunkFilename: 'css/[name]_[hash].chunk.css',
   }),
 ]
}, base)

// webpack.dev.js
const base = require('./webpack.base');
const merge = require('webpack-merge');
const webpack = require('webpack');

module.exports = merge({
 mode: 'development',
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [ // loader解析的顺序是从下到上，从右到左的顺序
     'style-loader', //使用MiniCssExtractPlugin时就不能使用style-loader了
     {
      loader: 'css-loader',
      options: {
       importLoaders: 2 //该方式可以让@import引入的css文件再次执行一边css打包loader
      }
     },
    ]
   }
  ]
 },
 output: {
		filename: '[name].js',
		chunkFilename: '[name].js',
	}
}, base)

npm install @babel/polyfill core-js -D

{
 "presets": [
  [
   "@babel/preset-env", // 将ES6语法转换为es5
   {
    "useBuiltIns": "usage", // 只编译需要编译的代码
    "corejs": "3.0.1",
   }
  ],
  ]
}

// webpack.base.js
optimization: {
  usedExports: true
 }

// package.json
"sideEffects": [
 "*.css",
 "*.less"
 ],

// webpack.prod.js
plugins: [
  new CleanWebpackPlugin()
 ],

npm install jquery -S

import $ from 'jquery';
import './styles/app.css'

console.log($('#root').html('hello world'));

//webpack.base.js
optimization: {
  splitChunks: {
   chunks: 'all',
   // chunks: 'async', // async表示只对异步代码进行分割
   minSize: 30000, // 当超过指定大小时做代码分割
   // maxSize: 200000, // 当大于最大尺寸时对代码进行二次分割
   minChunks: 1,
   maxAsyncRequests: 5,
   maxInitialRequests: 3,
   automaticNameDelimiter: '_',
   name: true,
   cacheGroups: { // 缓存组：如果满足vendor的条件，就按vender打包，否则按default打包
    vendors: {
     test: /[\\/]node_modules[\\/]/,
     priority: -10, // 权重越大，打包优先级越高
     // filename: 'js/vender.js' //将代码打包成名为vender.js的文件
     name: 'vender'
    },
    default: {
     minChunks: 2,
     priority: -20,
     name: 'common',
     // filename: 'js/common.js',
     reuseExistingChunk: true // 是否复用已经打包过的代码
    }
   }
  },
  usedExports: true
 }

npm install url-loader file-loader less less-loader

module: {
  rules: [
   // 将es6编译成es5
   { 
    test: /\.jsx?$/, // ?表示x有0个或一个
    exclude: /node_modules/, // 不编译某个目录下的文件
    include: path.resolve(__dirname, '../src'), // 只在include包含的目录下进行loader编译
    use: [
     "babel-loader",
    ]
   },
   // 加载解析文件资源
   {
    test: /\.(jpg|png|gif)$/,
    use: {
     loader: 'url-loader', // 和file-loader功能相同，但更智能
     options: {
      // 配置打包后的文件名,具体可看webpack的file-loader文档
      name: '[name].[ext]?[hash]',
      outputPath: 'images/',
      limit: 4096 // 当图片大小大于4k时将以文件形式输出，否则以base64输出
     }
    }
   },
   // 引入字体，svg等文件
   {
    test: /\.(eot|ttf|svg)$/,
    use: {
     loader: 'file-loader'
    }
   }
  ]
 },

// webpack.dev.js
module: {
  rules: [
   {
    test: /\.(css|less)$/,
    use: [ // loader解析的顺序是从下到上，从右到左的顺序
     'style-loader', //使用MiniCssExtractPlugin时就不能使用style-loader了
     {
      loader: 'css-loader',
      options: {
       importLoaders: 2 //该方式可以让@import引入的css文件再次执行一边css打包loader
      }
     },
     'less-loader',
    ]
   }
  ]
 }

// webpack.prod.js
module: {
  rules: [
   {
    test: /\.(css|less)$/,
    use: [ // loader解析的顺序是从下到上，从右到左的顺序
     {
      loader: MiniCssExtractPlugin.loader,
      options: {
       filename: '[name].css',
       chunkFilename: '[name].css',
       publicPath: '../' //****最后打包的时候替换引入文件路径
      },
     },
     {
      loader: 'css-loader',
      options: {
       importLoaders: 2 //该方式可以让@import引入的css文件再次执行一边css打包loader
      }
     },
     'less-loader'
    ]
   }
  ]
 }

body {
 #root {
  background-color: #000;
  color: #fff;
 }
}

npm install webpack-dev-server -D

webpack.dev.js
const base = require('./webpack.base');
const merge = require('webpack-merge');
const webpack = require('webpack');

module.exports = merge({
 mode: 'development',
 module: {
  rules: [
   {
    test: /\.(css|less)$/,
    use: [ // loader解析的顺序是从下到上，从右到左的顺序
     'style-loader', //使用MiniCssExtractPlugin时就不能使用style-loader了
     'vue-style-loader',
     {
      loader: 'css-loader',
      options: {
       importLoaders: 2 //该方式可以让@import引入的css文件再次执行一边css打包loader
      }
     },
     // 'sass-loader',
     'less-loader',
     'postcss-loader',
    ]
   }
  ]
 },
 // 服务器配置
 devServer: {
  port: '8081',
  // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
  historyApiFallback: true, // 解决单页面路由问题，
  contentBase: '../dist',
  open: true, //自动打开浏览器
  hot: true, // 开启热替换, css代码跟新不刷新页面
  // hotOnly: true 开启后只有手动配置才能更新，即使hot为true也不刷新浏览器
  proxy: {
   index: '', // 将index设置为空，可以对根路径进行转发
   'api/get': 'xxxx.com/api', // 第一种方式，直接代理到api路径
   'api/vue': { // 第二种方式，在路径需要临时替换时使用
    target: 'xxxx.com/api',
    pathRewrite: {
     'head': 'demo' //此时访问head路径将被代理到demo下
    },
    secure: false, //对https请求的配置，false为支持https
    changeOrigin: true //做代理分发时允许访问其他网站，突破网站限制，建议在开发环境使用
   },

  }
 },
 plugins: [
  new webpack.HotModuleReplacementPlugin()
 ],
 output: {
		filename: '[name].js',
		chunkFilename: '[name].js',
	}
}, base)

// 在script里面添加
"start": "webpack-dev-server --config ./build/webpack.dev.js",

// webpack.base.js
entry: {
  main: './src/index.js',
  about: './src/about.js'
 }

plugins: [
new HtmlWebpackPlugin(
  {
   template,
   title: 'webpack打包但单应用',
   chunks: ['vender', 'main']，
   filename: 'index.html'
  }
 ),
 new HtmlWebpackPlugin(
  {
   template,
   title: '关于我们',
   chunks: ['vender', 'about']，
   filename: 'about.html'
  }
 ),
]

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title><%= htmlWebpackPlugin.options.title %></title>
 <link rel="shortcut icon" href="./favicon.ico" rel="external nofollow" >
</head>
<body>
 <div id="root"></div>
</body>
</html>

npm install terser-webpack-plugin optimize-css-assets-webpack-plugin -D

// 导入模块
// 压缩css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 压缩js
const TerserPlugin = require('terser-webpack-plugin');

// 配置module.exports,添加配置如下
optimization: {
  minimizer: [
   new TerserPlugin({ // 压缩js代码
    cache: true, // 启用文件缓存
    parallel: true, // 使用多进程并行执行任务来提高构建效率
    sourceMap: true, // 将错误消息位置映射到模块
    terserOptions: {
     drop_console: true, // 打包时剔除所有console.log
     drop_debugger: true // 打包时剔除所有debugger
    }
   }), 
   new OptimizeCSSAssetsPlugin({})] // 压缩css代码
 },

npm install workbox-webpack-plugin --save-dev

if ('serviceWorker' in navigator) { window.addEventListener('load', () => {
   navigator.serviceWorker.register('/service-worker.js').then(registration => {
    console.log('SW registered: ', registration);
   }).catch(registrationError => {
    console.log('SW registration failed: ', registrationError);
    });
   });
 }

npm install --save-dev @babel/preset-react

{
 "presets": [
 [
  "@babel/preset-react",
  {
  "pragma": "dom", // default pragma is React.createElement
  "pragmaFrag": "DomFrag", // default is React.Fragment
  "throwIfNamespace": false // defaults to true
  }
 ]
 ]
}

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
 render() {
  return <div>react frame content.</div>
 }
}

ReactDOM.render(<App />, document.getElementById('root'));

npm install -D vue-loader vue-template-compiler

// webpack.base.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
 module: {
 rules: [
  // ... other rules
  {
  test: /\.vue$/,
  loader: 'vue-loader'
  }
 ]
 },
 plugins: [
 // make sure to include the plugin!
 new VueLoaderPlugin()
 ]
}

<template>
 <div class="example">
  {{ msg }}
  <img src="~/images/logo.png" />
  <img :src="imgSrc" />
 </div>
</template>

<script>
import Logo from 'images/logo.png';
import 'css/common.css';

export default {
 data () {
 return {
  msg: 'Hello world!单独的',
  imgSrc: Logo
 }
 }
}
</script>

<style lang="less">
.example {
 color: red;
 img {
  border: 2px solid #000;
 }
}
</style>

npm install awesome-typescript-loader --save-dev

{
  test: /\.tsx?$/,
  loader: 'awesome-typescript-loader'
  }

{
 "compilerOptions": {
  "noImplicitAny": true,
  "removeComments": true
 },
 "awesomeTypescriptLoaderOptions": {
  /* ... */
 }
}