开发环境处理

处理html

html-webpack-plugin

npm i --save-dev html-webpack-plugin@next //webpack5

plugins: [
  new HtmlWebpackPlugin({
    template:'**.html'
  })
]

处理样式

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

css-loader style-loader sass-loader

{
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
              loader: 'css-loader',
              options: {
                  minimize: false, //压缩css代码, 默认false
                  import: true, //禁止或启用@import, 默认true
                  url: true, //控制url/image-set的解析，会处理成require引入
              }
          }
        , 'sass-loader']
      }
    ]
  },
}

处理图片资源

yarn add -D url-loader file-laoder

// 小图片以bash64的方式输出
// 可以处理通过import引入的样式中的图片，js文件中引入的图片文件
// 如果图片大于指定大小会默认交给file-loader处理
// file-loader 会使用options中的配置
{
  test: /\.(png|jpe?g|gif)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 5 * 1024,
        outputPath: 'assets',
        name: '[hash:8].[ext]',
      }
    }
  ]
},
// 处理html中的图片
// 把html字符串中的图片引变成require的形式，
// 最终还是需要使用file-loader 和 url-loader来处理
// 如果生成的src是[object Module]需要关闭，url-loader的模块化规范
{
  test: /\.html$/i,
  use: [{
    loader: 'html-loader',
  }]
},

处理字体资源

{
  // exclude:/\.xx$/
  test: /\.(ttf|eot|svg|woff|woff2)$/,
  loader:'file-loader',
  options:{
    name:'[path][name].[ext]'
  }
  
}

简单的devServer搭建

yarn add -D webpack-dev-server

webpack.config.js 可能因为 webpack-dev-server与webpack版本不匹配导致错误

devServer:{
  compress: true,
  contentBase: path.join(__dirname, 'dist'),
  open:true
}

可以通过单独的server.js文件来使用

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');


const config = require('./webpack.config.js');

const options = {
  contentBase: './dist',
  publicPath: '/',
  hot: true,
  writeToDisk: true,
  open: true
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(9000, 'localhost', () => {
  console.log('dev server listening on port 9000');
});

friendly-errors-webpack-plugin[https://www.npmjs.com/package/friendly-errors-webpack-plugin]

添加桌面通知
该插件没有桌面通知的原生支持，需要引入node-notifier，这样就可以了 。

var NotifierPlugin = require('friendly-errors-webpack-plugin');
var notifier = require('node-notifier');
var ICON = path.join(__dirname, 'icon.png');
 
new NotifierPlugin({
    onErrors: (severity, errors) => {
      if (severity !== 'error') {
        return;
      }
      const error = errors[0];
      notifier.notify({
        title: "Webpack error",
        message: severity + ': ' + error.name,
        subtitle: error.file || '',
        icon: ICON
      });
    }
  })
]

打赏