webpack4 配置

安装 webpack4

yarn add webpack webpack-cli -D

新建 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "webpack demo project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // 增加
  },
  "author": {
    "name": "wubh2012"
  },
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.6"
  }
}

使用 命令yarn build 或 npx run build 运行

处理 CSS, sass, 图片等资源

yarn add style-loader css-loader -D
yarn add node-sass sass-loader -D
yarn add file-loader -D

配置 webpack.config.js

{
  test: /\.css|.scss|.sass$/,
  use: [{
    loader: MiniCssExtractPlugin.loader,
    options: {
        hmr: devMode,
    },
    },
    'css-loader',
    'sass-loader',
    ]},
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: [
  'file-loader'
  ]
 }

node-sass 安装失败

• 使用淘宝镜像源

  npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
  npm install node-sass

• 使用 cnpm 安装

  cnpm install node-sass

• 下载 .node 到本地

  到这里去根据版本号、系统环境，选择下载 .node 文件：

  https://github.com/sass/node-sass/releases

  然后安装时，指定变量 sass_binary_path，如：

   npm i node-sass --sass_binary_path='/Users/lzwme/Downloads/darwin-x64-48_binding.node' 

• 使用梯子 来源

  假设你的梯子在你本地机器上开启了一个第三方服务器 127.0.0.1:1080，那么只需按照下面的方法配置一下就能正常安装 node-sass 了（如果你开启的是 PAC 模式而不是全局模式，那还需要将 s3.amazonaws.com 加入 PAC 列表）：

  npm config set proxy http://127.0.0.1:1080
  npm i node-sass
  
  # 下载完成后删除 http 代理
  npm config delete proxy

独立出css文件，并压缩

yarn add mini-css-extract-plugin -D
yarn add optimize-css-assets-webpack-plugin -D
yarn add cssnano -D

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');


plugins:[
  // 独立css文件
  new MiniCssExtractPlugin({     
    filename: devMode ? '[name].css' : '[name].[hash].css',
    chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  // 压缩css
  new OptimizeCSSAssetsPlugin({
    assetNameRegExp: /\.css\.*(?!.*map)/g,
    cssProcessor: require('cssnano'),
    cssProcessorPluginOptions: {
      preset: ['default', { discardComments: { removeAll: true } }],
    },
    canPrint: true
  })
]

配置热更新部署

yarn add html-webpack-plugin -D
yarn add clean-webpack-plugin -D
yarn add webpack-dev-server -D

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server",
    "build": "webpack"
  },

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const APPDIR = 'src/';

module.exports = {
  mode: 'development',
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, APPDIR, 'index.html'),
      filename: 'index.html',
      inject: 'body'
    })
  ],

运行 yarn start ，然后用浏览器打开 localhost:8080

使用 babel 处理JS

yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader -D

// webpack.config 配置
{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-transform-runtime']
    }
  }
}      

来源：https://www.cnblogs.com/wubh/p/11353443.html