webpack配置一个基本的开发环境

最基本的搭建

1.初始化

npm init

1. 初始化以后才能使用npm包
2. 初始化完成会生成一个package.json文件

2.安装webpack与webpack-cli

  npm i webpack webpack-cli -g

webpack4.0版本以后需要安装webpack-cli包，4.0以前webpack-cli集成在webpack里面

3.添加脚本命令

package.json

scripts: {
    'build': 'webpack --mode production'
}

mode：production 压缩代码

mode：development 不会压缩代码

4.添加入口文件

新建./src/index.js默认文件

5.运行webpack

npm run build

会生成一个./dist/main.js文件

至此一个最基本的webpack搭建成功

更改webpack的配置文件，搭建自定义开发环境

1.新建webpack.config.js文件

**路径：**scripts/webpack.config.js

package.json指定webpack.config文件

scripts: {
    'build': 'webpack --mode production --config scripts/webpack.config.js'
}

2.设置出口与入口

webpack.config.js

// nodejs原生模块
const path = require('path')
module.exports = {
    // 入口文件
    entry: './src/index.js'
    // 出口
    output: {
        path: path.resolve(process.cwd(),'dist'),
        filename: '[name].[chunkHash:8].js'
    }
}

process.cwd()指运行此文件的路劲

__dirname:指此文件当前路径

3.使用html-webpack-plugin自动生成index.html文件

会自动引入main.js文件

当使用了hash模式的生成main.js时，即使改变内容生成了带不同hash的main.js，也会自动更改引入

安装好了以后，在配置文件里面加入plugins

npm i html-webpack-plugin -D

webpack.config.js

// nodejs原生模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口文件
    entry: './src/index.js'
    // 出口
    output: {
        path: path.resolve(process.cwd(),'dist'),
        filename: '[name].[chunkHash:8].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
          title: 'hello world',	
          filename: 'custom.html',
          template: 'public/index.html'	// 指定模板文件		
        })       
    ]
}

模板语法：<%= htmlWebpackPlugin.options.title %>

4.处理css文件

1.引入css

./src/index.js

import './src/index.css'

2.安装

npm i css-loader style-loader -D

3.使用

webpack.config.js

// nodejs原生模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口文件
    entry: './src/index.js'
    // 出口
    output: {
        path: path.resolve(process.cwd(),'dist'),
        filename: '[name].[chunkHash:8].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
          title: 'hello world',	
          filename: 'custom.html',
          template: 'public/index.html'	// 指定模板文件		
        })       
    ],
    module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },
        ],
  },
}

先执行css-loader处理css，然后再执行style-loader把处理好的结果动态插入js中，运行时再插入网页头部中

使用style-loader以后css与html没有分离

4.使用mini-css-extract-plugin提取css文件

1.安装

npm i mini-css-extract-plugin -D

2.使用

1. 引入mini-css-extract-plugin
2. 在plugins里面new一个实例
3. 把modules里的css的rules的style-loader改为MiniCssExtractPlugin.loader

// nodejs原生模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    // 入口文件
    entry: './src/index.js'
    // 出口
    output: {
        path: path.resolve(process.cwd(),'dist'),
        filename: '[name].[chunkHash:8].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
          title: 'hello world',	
          filename: 'index.html',
          template: 'public/index.html'	// 指定模板文件		
        }),
        new MiniCssExtractPlugin({
          filename: '[name].css'
        }),
    ],
    module: {
        rules: [
          {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
          },
        ],
  },
}

5.配置打包生成的文件路径

在文件名上加上自己设置的目录

webpack.config.js

filename: 'css/[name].css'
filename: 'js/[name].css'

6.建立服务器

1. 安装webpack-dev-server(基于express)

npm i dev-server -D

2.使用

package.json

scripts: {
    'build': 'webpack --mode production --config scripts/webpack.config.js',
    'dev': 'webpack-dev-server --mode development --config scripts/webpack.config.js'
}

3.配置参数

webpack.config.js

// nodejs原生模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    // 入口文件
    entry: './src/index.js'
    // 出口
    output: {
        path: path.resolve(process.cwd(),'dist'),
        filename: '[name].[chunkHash:8].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
          title: 'hello world',	
          filename: 'index.html',
          template: 'public/index.html'	// 指定模板文件		
        }),
        new MiniCssExtractPlugin({
          filename: '[name].css'
        }),
    ],
    module: {
        rules: [
          {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
          },
        ],
  },
  devServer: {
  	port: 9000,
    open: true
  }
}

4.npm run dev启动即可

不会生成dist目录，打包的东西放在内存里，没有生成实际文件

更改文件浏览器会自动刷新

HtmlWebpackPlugin插件里面的filename必须是index.html才能正确显示

估计是webpack-dev-server自动去找index.html文件