webpack

最新推荐文章于 2024-10-02 15:47:16 发布

ʚ浅初.ɞ

最新推荐文章于 2024-10-02 15:47:16 发布

阅读量150

点赞数

分类专栏： vue.js 文章标签： webpack 前端 vue.js

本文链接：https://blog.csdn.net/qq_61195495/article/details/121841031

版权

vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、webpack简介

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

二、使用步骤

1.使用webpack前的准备

1.新建一个webpack文件夹

2.在终端输入npm install -y初始化package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等）

3.在webpack文件夹里新建src文件夹，创建index.html和.index.js

index.html:

    <script src="../js/index.js"></script>
</head>
<body>
    <div id="box">我是测试文字</div>
</body>

index.js:

import $ from "jquery";

$(function() {
  $("#box").css("color", "green");
});

此时访问页面会报错因为因为浏览器不能识别es6中的import导入语法

Uncaught SyntaxError: Unexpected identifier

2.使用webpack

npm install webpack webpack-cli -D安装webpack
新建webpack.config.js,配置代码如下：

module.exports = {
  mode: "development" //可以是development开发模式或者production生产上线模式
};

修改package.json文件，添加代码如下：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",//这个是本来就有的
    "dev": "webpack"
  },

npm run dev

然后我们在命令行终端执行npm run dev就可以执行webpack打包命令了。此时就会自动生成一个dist文件夹，里面有main.js就是我们打包好的文件。我们在src/index.html中引入你打包好的main.js再重新运行就没有问题了。

    <script src="../dist/main.js"></script>
</head>
<body>
    <div id="box">我是测试文字</div>
</body>

3.配置打包的入口和出口

webpack默认打包的入口文件是src/index.js,打包后的出口文件是dist/main.js文件。修改打包后的入口和出口文件需要如下操作。

修改webpack.config.js文件如下：

const path = require("path"); //引入处理路径的path模块

module.exports = {
  mode: "development", //可以是development开发模式或者production生产上线模式
  entry: path.join(__dirname, "./src/index.js"),
  output: {
    path: path.join(__dirname, "./dist"), //指定输出文件路径
    filename: "bundle.js" //输出文件的名称
  }
};

运行npm run dev ，就会在dist目录中重新生成新的打包文件bundle.js

在index.html中引入并使用：

    <script src="../dist/bundle.js"></script>
</head>
<body>
    <div id="box">我是测试文字</div>
</body>

4.webpack自动打包

因为我们每次修改了index.js里面的代码，index.html并不会立马起作用，因为它引入的打包后的bundle.js文件,我们需要每次重新npm run dev打包再测试

npm install webpack-dev-server -D
修改package.json文件

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",//这是原来就有的
    "dev": "webpack-dev-server"//把webpack修改如右侧的内容
  },

修改index.html的引入路径

<script src="/bundle.js"></script>

npm run dev 启动webpack的自动打包
测试我们随便修改index.js代码的内容，浏览器访问index.html的时候页面效果都会跟着发生变化注意：我们默认访问路径是： http://localhost:8081/index.html

访问效果：

此时访问会出错，进行下一步才能正常显示

5.配置html-webpack-plugin

安装插件 npm install html-webpack-plugin -D
修改webpack.config.js

const path = require("path"); //引入处理路径的path模块
const HtmlWebpackPlugin = require("html-webpack-plugin"); //导入模板处理插件
const HtmlPlugin = new HtmlWebpackPlugin({
  template: "./src/index.html",
  filename: "index.html"
});//指定复制的源文件地址
module.exports = {
  mode: "development", //可以是development开发模式或者production生产上线模式
  entry: path.join(__dirname, "./src/index.js"),
  output: {
    path: path.join(__dirname, "./dist"), //指定输出文件路径
    filename: "bundle.js" //输出文件的名称
  },
  plugins: [HtmlPlugin]//指明使用的插件
};

运行 npm run dev
浏览器访问 http://localhost:8080就能直接访问index.html页面了，不用再http://localhost:8080/src/index.html访问了

6.打包css文件

我们新建css/index.css文件，然后在index.js引入css文件，此时再打包的时候就会报错，引入它不能直接打包css文件

index.js:

import $ from "jquery";
import "./css/index.css";

$(function() {
  $("#box").css("color", "green");
});

解决方法：

npm install style-loader css-loader -D 安装对应处理loader
修改webpack.config.js文件，添加module->rules规则

module.exports = {
  mode: "development", //可以是development开发模式或者production生产上线模式
  entry: path.join(__dirname, "./src/index.js"),
  output: {
    path: path.join(__dirname, "./dist"), //指定输出文件路径
    filename: "bundle.js" //输出文件的名称
  },
  plugins: [HtmlPlugin],
  module: {
    rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] }]
  }
};

再次启动npm run dev

7.打包less文件

新建index.less文件

index.less:

ul {
    li {
      list-style: none;
    }
}

在index.js中引入less文件

index.js:

import $ from "jquery";
import "./css/index.css";
import "./css/index.less";
$(function() {
  $("#box").css("color", "green");
});

直接运行会报错

解决方法：

npm install less-loader less -D
修改webpack-config.js

 module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }
    ]
  }

运行npm run dev

8.配置postcss

配置postcss主要是配置css的前缀，主要是浏览器兼容性效果使用的。

npm install postcss-loader autoprefixer -D 安装解析包
项目根目录新建postcss.config.js文件，配置如下：

const autoprefixer = require("autoprefixer");
module.exports = {
  plugins: [autoprefixer]
};

修改webpack.config.js，添加postcss-loader

 module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }
    ]
  }

npm run dev重新启动服务

9.配置图片和字体

我们在src下面新建images文件夹，里面提供图片2.jpg

index.css：

#box {
  width: 300px;
  height: 300px;
  background: url(../images/2.jpg) no-repeat center center;
}

此时npm run dev一执行也会报错

解决方法：

npm install url-loader file-loader -D
修改webpack.config.js文件

 module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      {test: /\.jpg|png|gif|ttf|eot|woff|woff2/,}
    ]
  }