webpack的基础用法

---

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

webpack 是一个"模块打包器",它能根据模块的依赖关系递归的构建一个依赖关系图,当中包含了应用程序需要的所有模块,最后打包成一个或多个bundle
模块打包器:它做的事情是,它做的事情是，分析你的项目结构，找到JavaScript模块(commonJs)以及其它的一些浏览器不能直接运行的拓展语言（Scss，jsx,.vue)等,并将其打包为合适的格式以供浏览器使用

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.webpack安装

全局安装

全局安装：
cnpm install webpack -g
cnpm install webpack-cli -g

##局部安装

局部安装：
cnpm install webpack -D
cnpm install webpack-cli -D

2.webpack的核心概念

1.entry（入口）

entry 入口用于指引webpack应该先从哪个模块开始,它是构建的入口,之后webpack会自动找出应用内其他相互依赖的内容进行打包.通过在webpack配置文件中配置entry属性来指定入口,虽然一般项目中只指定一个入口,但是实际上可以指定多个入口的

entry配置：

 entry: {
    app: path.resolve(__dirname, './src/main.js')
  },

2.出口（output）

output出口 用于告诉webpack所构建的bundles在哪里输出,默认路径是 ./dist
output配置：

output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, './dist')//必须是绝对路径 
  },

3.loader（转换器）

loader用于配置webpack处理一些非js文件,因为 webpack本身只能理解javascript.

loader配置

module:{
	//用于标识出应该被对应的 loader 进行转换的某个或某些文件。
	test: '/\.scss$/',
	//表示进行转换时，应该使用哪个 loader。
    use: 'scss-loader'
    
}

3.plugins（插件)

plugins插件的主要作用是打包优化,压缩等,它的功能和loader一样非常强大,使用任何插件时,只需要require引入进来即可
plugins配置

plugins: [
    // 用于把打包(编译)后的js脚本与index.html关联起来
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html'),
      title: 'react'
    })
  ],

---

4.mode

配置

module.exports={
    mode:'production'  //  production||development 
}

3.使用webpack

1.安装

cnpm install webpack -D
cnpm install webpack-cli -D

2.逐渐安装loader

a.将es6语法转为浏览器识别的es5语法

babel-loader ( ES6 => ES5 ,react) (babel-loader@7 babel-core babel-preset-es2015)

$ npm i babel-loader@7 babel-core babel-preset-es2015 -D

b. 将css 文件当成模块处理

css-loader,style-loader

$ npm i css-loader style-loader  -D

c. scss 编译生成css文件

sass-loader node-sass

$ cnpm i sass-loader node-sass  -D  //node-sass使用npm下载比较慢,这里使用了cnpm

d.文件 copy 到目标文件夹

file-loader url-loader

$ npm i file-loader  url-loader  -D

e.处理css兼容

postcss-loader autoprefixer postcss

$ npm i postcss-loader autoprefixer postcss  -D

4.webpack.config.js

配置web.config.js

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')

// 区分生产环境和开发环境
const ENV = process.env.NODE_ENV

const config = {
  // 入口
  entry: {
    app: path.resolve(__dirname, './src/main.js')
  },
  // 出口
  output: {
    // filename: 'bundle.js',
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, './dist')
  },
  // plugins
  plugins: [
    // 用于把打包(编译)后的js脚本与index.html关联起来
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html'),
      title: 'react'
    })
  ],
  // 模块化：在webpack眼中，一切文件都是模块
  module: {
    rules: [
      // 打包或编译时，当检测到是.js文件时，我就用babel-loader来进行加载，使用Babel编译器进行代码编译
      // 安装@babel/core  @babel/preset-env  @babel/preset-react
      { test: /\.(js|jsx)$/, use: ['babel-loader'], exclude: /node_modules/ },
      // 打包或编译时，当检测到是图片后缀的模块时，就使用file-loader进行加载
      { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader']},
      // 如果是scss文件，必须使用这三个loader进行加载与处理
      // 要安装node-sass，它的作用是把浏览器识别不了sass文件转化成css
      { test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader']}
    ]
  },
  resolve: {
    // 路径别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    // 省略扩展
    extensions: ['.js', '.json']
  }
}

// 执行 npm run build 时特有的配置
if (ENV === 'production') {
  config.mode = 'production'
  // 清理dist目录
  config.plugins.push(new CleanWebpackPlugin())
}

// 执行 npm run serve 时特有的配置
if (ENV==='development') {
  config.mode = 'development'
  // 用于调试，当浏览器中报错，指定是源码中的报错位置，而不是编译后的代码中的位置
  config.devtool = 'source-map'
  // 给开发环境添加特有的本地服务webpack-dev-server
  config.devServer = {
    port: 8090,
    open: true,
    // 指定本地静态资源服务器
    // contentBase: './public'
    contentBase: path.resolve(__dirname, 'public'),
    // 开启热更新，启动本地服务时创建一个websocket长连接
    // 当代码有变化时，把变化的数据推送客户端进行更新
    hot: true,
    // 当eslint报错时，让错误覆盖在视图之上
    overlay: {
      errors: true
    },
    proxy: {
      '/soso': {
        target: 'https://c.y.qq.com',
        ws: true,
        changeOrigin: true
      }
    }
  }
  // 用于热更新的两个插件
  config.plugins.push(new webpack.NamedModulesPlugin())
  config.plugins.push(new webpack.HotModuleReplacementPlugin())
  // 配置开发环境独有的ESLint
  // enforce='pre'指定这个loader是前置loader，当它出错时，其它正常的loader是不工作的
  // 要安装eslint，它的作用是真正用于检测代码规范的
  // 还要加 .eslintrc.json 这个配置文件
  config.module.rules.push(
    {
      test: /\.(js|jsx)$/,
      use: ['eslint-loader'],
      exclude: /node_modules/,
      enforce: 'pre'
    }
  )
}

module.exports = config

webpack的基础就介绍到这了！