webpack.config.js的基本配置

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const {resolve} = require('path') module.exports = {

entry:'./src/index.js',

output:{
    filename:"built.js",
    path:resolve(__dirname,'build')
},

module: {
  rules: [
    {
      test: /\.css$/,
      use: [style-loader,css-loader]
    },
    {
      test: /\.less$/,
      use: [style-loader,css-loader,less-loader]
    },
    
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192,
            esModule: false,
            name: '[hash:10].[ext]'
          }
        },
      ],
      type: 'javascript/auto',
    },
   
    {
      test: /\.html$/i,
      loader: "html-loader",
    },
    {
      exclude: /\.(html|js|css|less|jpg|png|git)$/,
      loader: 'file-loader',
      options: {
        name: '[hash:10].[ext]'
      }

    },

  ]
},

plugins:[ 
new webpack.BannerPlugin('This file is created by ly'),
new HtmlWebpackPlugin({
  template: './src/index.html'
})],

mode:"development",
//開發服務器,用來自動化
devServer: {
  // contentBase:resolve(__dirname,'build'),
  compress:true,
  port:3000,
  open:true
},

};

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章