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']
    }
  }
}