webpack总结

webpack

1、核心概念

• entry 入口

  指示 webpack 从哪个文件开始构建/打包

• output 输出

  指示 webpack 打包完成的文件输出哪里去

• loader 加载器

  webpack 自身能力有限，只能处理 js/json 文件，但是遇到 css/html 等文件就没办法处理

  loader 能将 webpack 不识别的文件编译加载成 webpack 能识别的文件，这样才能打包处理

• plugin 插件

  功能比 loader 更加强大，增强 webpack 的功能

• mode 模式

  development 开发环境

  production 生产环境

2、基本使用

安装

• 初始化 package.json

  npm init -y

• 下载

  npm i webpack webpack-cli -D

使用

• 开发模式

  npx webpack ./src/js/index.js -o ./build/js --mode=development

  能够处理 JS 文件（能将 ES6 模块化编译成浏览器能识别的语法）

• 生产模式

  npx webpack ./src/js/index.js -o ./build/js --mode=production

  能够处理 JS 文件（能将 ES6 模块化编译成浏览器能识别的语法）

  压缩 JS 代码

3. 配置详情

3.1 webpack.config.js基本配置

const path = require("path");
module.exports = {
    //配置对象
    entry: './src/js/index.js',//入口
    output: {
        path: path.resolve(__dirname, "build"), //目录
        filename: "./js/build.js"
    },
    mode: 'development'//模式
}

//npx webpack 直接启动

3.2 less的打包

//在入口文件中 引入less文件
import '../less/public.less'
import '../less/test.less'

//安装loader包
npm install less less-loader style-loader css-loader --save-dev

//配置package.json文件
module: {
    rules: [{
        test: /\.less$/i, //检测文件是否是less文件
        use: [{ //执行顺序  从上向下  从右向左依次同步执行
            	loader: 'style-loader', //将js中的css模块以style标签的方式插入到页面中
        		},
              //如果loader不需要配置信息可以直接这样书写
              'css-loader', //将css文件以commonjs模块方案整合到到js中
              {
                  loader: 'less-loader', //将less文件编译成css文件
              },
             ],
    }, ],
},

3.3 图片的打包

//在样式中使用图片
background: url("../img/05.jpg");

//安装包
npm install url-loader --save-dev

//配置
{
    test: /\.(png|jpg|gif)$/i,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 256,
                name: '[hash:10].[ext]'
            },
        }, ],
},

3.4 html的打包

//下载包并引用
const HtmlWebpackPlugin = require('html-webpack-plugin');

//插件的配置
plugins: [new HtmlWebpackPlugin({
    template: "./src/index.html"
})],
    
//解决img标签  使用html-loader
{
    test: /\.html$/i,
    loader: 'html-loader'
},