webpack

webpack

简介

前端项目构建工具（整合工具）

npm补充

npm install xx -D 即写入devDependencies对象（里面的插件只用于开发环境，不用于生产环境）

save开头——开发和生产环境，记住这个就行 npm install xx -S 即写入dependencies对象（生产环境）

为什么使用webpack

因为有一些浏览器不识别es6，webpack会帮助我们解析

使用步骤

安装

• npm install webpack webpack-cli -D

• 新建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
• 会默认帮我们生成一个dist文件夹，里面的main.js就是打包好文件在页面重新引入打包好的文件就可以

配置打包的入口和出口

默认打包的入口文件是src/index.js,打包后的出口文件是dist/main.js文件。 如果我们想修改打包后的入口和出口文件，需要如下配置

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

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

重新运行npm run dev命令

配置webpack自动打包

下载依赖 npm install webpack-dev-server -D

修改package.json文件

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

修改引入路径

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

运行npm run dev命令，这里会报错所以我们需要配置下面这个环境

配置html-webpack-plugin

安装插件 npm install html-webpack-plugin -D

修改webpack.config.js

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

重新运行npm run dev命令

webpack加载器

webpack默认只能处理.js后缀的文件，其他文件默认无法直接打包，所以需要loader

• less-loader辅助打包.less相关的文件
• sass-loader 辅助打包.sass相关文件
• url-loader辅助打包路径相关的文件

打包css文件

• 安装插件 npm install style-loader css-loader -D

• 修改webpack.config.js文件 ，添加moudle->rules规则

  module.exports = {
    //可以是development开发模式或者production生产上线模式
    mode: "development", 
    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命令

打包less文件

• 安装插件 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命令

配置postcss

• 针对浏览器兼容性效果使用

• 安装插件 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命令

配置图片和字体

• 安装插件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/,
          use: "url-loader?limit=16940"
        }
      ]
    }
  

• 重新运行npm run dev命令