关于webpack和grunt/gulp的对比和使用 webpack3.6.0

最新推荐文章于 2023-11-01 18:50:49 发布

hylls

最新推荐文章于 2023-11-01 18:50:49 发布

阅读量336

点赞数

文章标签： npm

本文链接：https://blog.csdn.net/hylls/article/details/104493997

版权

本文深入解析为何项目中需要局部安装Webpack，而非使用全局版本。阐述了局部安装的重要性，包括如何根据项目需求定制化配置，以及如何通过npm初始化并管理项目依赖。同时，介绍了基本的webpack.config.js配置示例。

摘要由CSDN通过智能技术生成

在这里插入图片描述
为什么需要局部安装因为每个项目的webpack可能版本不同,
如果用全局的webpack 命令就不会统一,
所以需要局部的webpack 然后根据其中的package.json来打包成一个js文件

//这种需要依赖node 要npm init初始化然后把package.json 弄出来
//package-lock.json (npm包管理的文件)可以通过   npm install 出来
const path = require ('path'); 
module.exports = {
  entry: "./src/main.js", // 入口 打算把那个js文件打包
  output: { // 输出 把入口的js文件输出到哪里
    path: path.resolve(__dirname, 'dist'), //__dirname是全局变量
    filename: 'bundle.js',
  }
}

npm run build怎么来的呢打开package.json 然后找到scripts(脚本)

npm install webpack@3.6.0 --save-dev
开发时依赖指的是:开发打包需要这些文件等项目发布或者上线的时候就不需要了

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" //scripts 这一栏创建一个build 这样就可以用npm run build 来代替webpack
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

以下是一些基础的webpack.config.js的配置

const path = require('path');
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, 'dist'), //__dirname是全局变量
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        //css-loader只负责加载 style-loader负责将css添加到DOM上
        // use的顺序是从右往左
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片小于limit值 ,会将图片编译成base64字符串形式
              // 当加载的图片大于limit值 ,要使用file-loader模块进行加载
              limit: 8192
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
}