webapck.config.js

最新推荐文章于 2024-07-18 12:59:05 发布

Tantan-LianAi

最新推荐文章于 2024-07-18 12:59:05 发布

阅读量59

点赞数

分类专栏： javascript 文章标签： webpack 前端

本文链接：https://blog.csdn.net/qq_45938729/article/details/125302686

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

const path = require('path')
const webpack = require('webpack')
// const UglifyPlugin = require('uglifyjs-webpack-plugin')
const VueloaderPlugin = require('vue-loader/lib/plugin')


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

module.exports = {
  entry: './src/index.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name][hash].js',
    clean: true
  },

  module: {
    rules: [
      {
        test: /\.js|jsx/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: 'babel-loader',
      },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.vue$/, use: 'vue-loader' }
    ],
  },

  // 代码模块路径解析的配置
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, 'src')
    ],

    // extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"],
  },

  plugins: [
    // new UglifyPlugin(),
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: 'index.html',
      // inject: "body",
    }),
    // 使用 uglifyjs-webpack-plugin 来压缩 JS 代码
    // 如果你留意了我们一开始直接使用 webpack 构建的结果，你会发现默认已经使用了 JS 代码压缩的插件
    // 这其实也是我们命令中的 --mode production 的效果，后续的小节会介绍 webpack 的 mode 参数
    new webpack.HotModuleReplacementPlugin(),
    new VueloaderPlugin(),
    // new webpack.DefinePlugin({ // webpack自带该插件，无需单独安装
    //5.0不需要这个了
    //   'process.env': {
    //     NODE_ENV: process.env.NODE_ENV // 将属性转化为全局变量，让代码中可以正常访问
    //   }
    // })

  ],
  devServer: {

    host: 'localhost',
    // contentBase: path.resolve(__dirname, 'src'),
    // static: {
    //   directory: resolve(__dirname, 'dist')
    // },
    historyApiFallback: true,
    compress: true,
    port: 3000,  //端口好
    hot: true, // 开启热更新
    open: true, //是否打开浏览器
  },
  mode: 'development',

}

package.json

{
  "name": "five",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "b": "webpack",
    "start": "webpack-dev-server  --mode development",
    "watch": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@vue/compiler-sfc": "^3.2.37",
    "babel-loader": "^8.2.5",
    "html-webpack-plugin": "^5.5.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-loader": "^15.9.8",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "dependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "vue": "2.5.10",
    "vue-template-compiler": "2.5.10"
  }
}