webpack基本配置

webpack

中间可能会出现cnpm , npm ,yarn等三种安装方式,其实最终安装的结果都是一样的,只是安装的方式不一样

1.安装webpack

 npm i webpack -g全局安装webpack
 //在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

1.webpack配置文件

1. 在项目根目录中创建webpack.config.js

2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

 // 导入处理路径的模块
  var path = require('path');
 ​
 // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
  module.exports = {
  entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
  output: { // 配置输出选项
  path: path.resolve(__dirname, 'dist'), // 配置输出的路径
  filename: 'bundle.js' // 配置输出的文件名
  }
  }

2.项目入口/项目出口

1.配置完之后,直接用webpack进行打包,就会输出对应的文件夹

3.下载html-webpack--plugin插件

 yarn add html-webpack-plugin --dev

//html-webpack-plugin。它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 plugins: [new HtmlWebpackPlugin({
  template: './src/index.html' //输出的路径
  })]

4.打包js脚本

官方入口:https://webpack.js.org/loaders/babel-loader/#root

1.安装

npm install -D babel-loader @babel/core @babel/preset-env webpack

 module: {
  rules: [
  {
      test: /\.m?js$/,
      exclude:  /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {presets: ['@babel/preset-env']
          }
        }
      }
    ]
 }

8.启动热更新,配置端口号

• 修改package.json的script节点

  • --open`表示自动打开浏览器

  • --port 4321表示打开的端口号为4321，

  • --hot`表示启用浏览器热更新,不开启就自动刷新：

 "dev": "webpack-dev-server --hot --port 4321 --open"

5.打包css文件

1.安装

 cnpm i style-loader css-loader --save-dev

2.配置(webpack.config.js)

 module: { // 用来配置第三方loader模块的
  rules: [ // 文件的匹配规则
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则 ]
  }

• use表示使用哪些模块来处理test所匹配到的文件；use`中相关loader模块的调用顺序是从后向前调用的；

使用webpack打包less文件

1.安装

cnpm i less-loader less -D

1. 修改webpack.config.js这个配置文件：

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

使用webpack打包sass文件

1. 安装

cnpm i sass-loader node-sass --save-dev

2. 在webpack.config.js中添加处理sass文件的loader模块：

 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack处理css中的路径

1.安装

npm install --save-dev style-loader css-loader

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

使用babel处理高级ES6语法

1.安装

cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
//7.1.5版
npm install [email protected]

运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法

1. 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

4. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

 {
  "presets":["es2015", "stage-0"],
  "plugins":["transform-runtime"]
 }

5. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；*

处理图片

npm install --save-dev file-loader

 const path = require('path');
 ​
 module.exports = {
  entry: './src/index.js',
  output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
  },
    module: {
    rules: [
        { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
        { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ]
        }
      ]
    }
  };

处理比较小的图片

 npm install url-loader --save-dev

module.exports = {
  module: {
      rules: [
      {test: /\.(png|jpg|gif)$/i,use: [{ loader: 'url-loader',options: { limit: 8192,} },
       ],
      },
    ],
   },
 };

一次性处理

 // //图片
 // {test: /.(png|svg|jpg|gif)/, use: ['file-loader']},
 {
 test: /.(png|jpg|gif|woff|woff2|eot|ttf|otf|svg)$/i,
 use: [
 {
 loader: 'url-loader',
 options: {
 limit: 8192,
 },
 },
 ],
 },

处理字体图标

 yarn add font-awesome

import 'font-awesome/css/fontawesome.min.css';

项目打包

 npm run build