基本配置

安装

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

查看版本

npm info webpack

本地预览

webpack-dev-server

运行

npx webpack

环境变量

webpack.config.js //主目录下文件名

const path = require('path');

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

• entry:入口文件名
• output：出口文件名

引入html

webpack.docschina.org/plugins/htm…

1. 安装

npm install --save-dev html-webpack-plugin

2. 配置webpack.config.js

引入css

webpack.docschina.org/loaders/css…

1. 安装

npm install --save-dev css-loader

2. 拉到file.js

import css from "file.css";

3.配置webpack.config.js

• css-loader 将css拉入main.js
• style-loader 将css拉入html的style标签

使用 webpack-dev-server

webpack.docschina.org/guides/deve… 1.安装

npm install --save-dev webpack-dev-server

2.配置webpack.config.js 3.配置package.json

懒加载

//lazy.js文件下
export default function lazy(){
	console.log('我是懒加载模块')
}


//主文件下
button.click()=>{
	const promise =import('./lazy.js')
    promise.then((module)=>{
    	const fn =module.default
        fn()
    },()=>{console.log('模块加载错误')})
}