你可能不知道的webpack小知识

一、概念

  是一个静态模块打包工具。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,主要包括下面四个核心概念
1.入口entry:指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始
2.出口output:告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist
3.loader:让webpack处理非JavaScript类型的文件,webpack中的loader主要用两个目标:
① test:应该被loader转化的文件
②use:转换文件时使用什么样的loader
4.插件:主要是解决loader无法解决的其他事情

二、使用步骤

1.初始化项目
2.安装两个webpack安装包
3.安装相关的loader
4.书写webpack.config.js配置文件
5.执行webpack命令
注意事项
1-1 webpack本身只能处理JavaSc类型的文件,对于非js类型的文件需要借助相关的loader处理打包
1-2 处理非js类型的文件步骤
① 书写相关的css、less文件
② 在src文件夹下的main函数importcss、less文件
③ 在html页面引入打包后的build.js文件即可。
下面附上使用步骤的代码:

1.初始化项目
npm init -y / npm init

2.安装webpack:
npm install webpack -g
npm install webpack-cli -g
注意事项:建议全局安装,因为后期会大量用到

3.安装相关loader
① 解析js的loader:
npm install babel-loader babel-core --save-dev

插件:
npm install babel-preset-es2015 babel-plugin-transform-runtime --save-dev
相关解析:
1.babel:语法转化器(只转化关键字)
2.babel-core:核心包
3.babel-loader:babel与webpack结合就使用babel-loader
4.babel-preset-es2015:提供预设(转化为ES5)
5.babel-plugin-transform-runtime:转化ES6函数


② 解析css的loader:
npm install css-loader style-loader autoprefixer-loader --save-dev

相关解析:
1.css-loader:核心包
2.style-loader:生成script标签并插入
3.autoprefixer-loader:添加前缀(解决兼容性问题)


③解析less的loader:
npm install less less-loader --save-dev

webpack.config.js的配置文件如下:

const path=require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装

const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
    // 打包main.js,打包后的文件输出到dist目录中,起名为build.js
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: 'build.js'
    },
    // 配置不同类型文件模块的加载
    module: {
        rules: [
            // 配置css文件模块,让css-loader那css文件打包到js中,再用style-loader让样式生效
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'    
                ]
            },
            // 配置less文件模块
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            
            // 配置解析es6为es5
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            // 配置要解析的语法规范
                            presets: ['es2015'],
                            // babel-loader的依赖,不引入部分es6代码可能会解析错误
                            plugins: ['transform-runtime']
                        }
                    }
                ],
                // 排除掉这里的js模块,不然webpack解析他们,提高打包速度
                exclude: /node_modules/
            }
        ],
        plugins: [
            new HtmlWebpackPlugin({template: './src/index.html'})
          ]
    }
};

你可能感兴趣的:(你可能不知道的webpack小知识)