手动配置webpack

1.初始化package.json 安装webpack

npm init -y
npm i webpack webpack-cli -D

2.新建webpack.config.js

3.安装html依赖

npm i html-webpack-plugin -D

配置webpack.config.js

1.定义入口entry

• 字符串类型

entry: './src/index.js'
// 以src/index.js为入口打包

• 数组类型

entry: ['./src/index.js', './src/a.js']
// 以src/index.js,src/a.js为入口打包

• 对象类型

entry: {
    main: ['./src/index.js', '/src/a.js'],
    util: ['./src/util.js']
}
// 以index.js、a.js为入口打包main.js
// 以util.js为入口打包util.js

2.定义出口

output: {
    // 输入文件名称
    filname: 'bundle.js', 
    // 对象入口定义出口时需写成
    filename: '[name].js',
    // 定义输出路径
    // (需引入模块path) path=require('path')
    path: path.resolve(__dirname, 'build'),
    // 每次打包清除之前打包的目录内容
    clean: true,
}

3.处理html文件

  plugins: [
        // 定义多个实例时必须指定filename
        new HtmlWebpackPlugin({
            // 定义输出的html的title
            // (使用title选项并指定template时需要修改模板title标签)
            // <title><%= htmlWebpackPlugin.options.title%></title>
            title: 'webpack-start',
            // 定义使用的html模板
            template: path.resolve(__dirname, './src/index.html')，
            // 打包的html名称 默认为index.html
            // filename: 'start.html'
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true,
            },
            // 定义引入哪个打包后的js
            chunks: ['main']
        }),
    ]

4.处理css资源

 module: {
    rules: [
        //wanner 写css部分注释
        {   
            test: /\.css$/,
            use: ['style-loader', 'css-loader']            
        }，
        // 配置less(安装less、less-loader)
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        },
        // 配置sass(安装node-sass、sass-loader)
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
}

将css打包成独立的文件(此时的css资源还是混入在js中被require的方式引入，被css-loader解析，然后由style-loader解析成style标签插入到了head中,可以安装mini-css-extract,打包成单独的css文件)

plugins: [
    new MiniCssExtractPlugin()
]

替换loader

image.png

显示结果

image.png

此时的完整配置

image.png

(到此时已经简单处理js、html、css)

---

• 处理css浏览器兼容性(postcss-loader, postcss-preset-env, 创建postcss.config.js)

  
  步骤一
  步骤二
  步骤三