webpack打包配置

最新推荐文章于 2024-06-24 20:34:24 发布

GoodLuck_wu5

最新推荐文章于 2024-06-24 20:34:24 发布

阅读量2k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/GoodLuck_wu5/article/details/106454984

版权

本文详细介绍了如何配置webpack进行项目打包，包括打包js、css、less文件，处理小于和大于8kb的图片，将ES6转为ES5，配置vue，使用plugin添加版权、打包HTML和压缩js，以及搭建本地服务器。每个步骤都提供了具体的操作方法，如安装所需loader和plugin，修改webpack.config.js文件等。

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

1、打包js文件

1、找到当前文件夹：
cd pink教学案例
cd vue
cd 资料
cd “Day 04”
cd 课堂代码4
cd LearnVuejs04-v2
cd 01-webpack的使用

cd … （上一个文件夹）

2、初始化：
在终端输入：npm init 就会生成package.json
在终端输入：npm install 生成 package-lock.json

3、建 webpack.config.js

const path = require('path'); // 依赖node动态获取路径

module.exports = {
   
  entry: './src/main.js',    // 入口，也就是要打包的js
  output: {
   
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'    // 出口，打包生成的js
  },
}

4、在package.json文件里的test下加上一句 “bulid”:“webpack”
5、本地安装webpack 在终端输入 npm install webpack@3.6.0 --save-dev
6、打包：在终端输入 npm run build （优先执行本地的webpack，找不到则使用全局webpack）

2、打包css文件

在打包js文件的基础上：
1、在入口js（main.js）添加：require(’./css/normal.css’) 要添加的css文件
2、安装css-loader：在终断输入 npm install --save-dev css-loader
3、安装style-loader：在终端输入 npm install --save-dev style-loader
4、配置：在webpack.config.js中配置

const path = require('path')

module.exports = {
   
  entry: './src/main.js',
  output: {
   
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 添加的部分
  module: {
   
    rules: [
      {
   
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

5、打包 npm run build

3、打包less文件

在打包css文件的基础上：
1、在入口js（main.js）引入less文件，添加：require(’./css/special.less’) 要添加的less文件
2、安装对应的less-loader 在终端输入 npm install --save-dev less-loader less
3、配置：在webpack.config.js中配置
添加一个rules选项，用于处理less文件