其他分享
首页 > 其他分享> > webapck 基础配置文件 (小白篇)

webapck 基础配置文件 (小白篇)

作者:互联网

为什么选择 webpack

配置文件名称

webpack 配置组成

module.exports = {
  entry:   ----> 打包文件的入口
    output:  -----> 打包的输出
    mode: 'production'  ----> 环境
    module: {
        rules: [
            { test: /\.txt$/ }   -----> Loader 配置
        ]
    },
    plugins: [      -------> 插件配置
        new HtmlwebpackPlugin({
            template: ''
        })
    ]
}

使用 webpack 打包文件

准备文件及安装webapck

  1. 打开终端 常见文件 及 初始化项目 (注意要先安装 node)
mkdir  my-webpack
cd my-webpack
npm init -y
  1. 安装 webpack 及 webpack-cli
npm install webpack webpack-cli --save-dev
  1. 新建webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  },
  mode: 'production'
}
  1. 创建src 下的 index.js 文件,简单写一写逻辑代码
  2. 然后在项目目录下的终端执行
./node_modules/.bin/webpack
  1. 使用 npm 命令 替代 ./node_modules/.bin/webpack 打包
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},

entry 和 output

单入口

entry: './src/index.js',
output: {
    path: path.join(__dirname, 'dist'),
  filename: 'build.js'
}

多入口

entry: {
    app: './src/index.js'
    app2: './src/main.js'
},
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
},

Loaders

常用的 Loaders

Plugins

常见的 Plugins

Mode

module.exports = {
  mode: 'development'
};
webpack --mode=development

内置函数功能

会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。

会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称,FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin 和 TerserPlugin 。

不使用任何默认优化选项

使用 babel 解析 ES6

npm i @babel/core @babel/preset-env babel-loader -D
{
  "presets": [
    "@babel/press-env"
  ]
}
module: {
    rules: [
        {
            test: /.js$/,
            use: 'babel-loader'
        }
    ]
}

解析 CSS 文件

module: {
    rules: [
        {
            test: /.js$/,
            use: 'babel-loader'
        },
        {
            test: /.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }
    ]
}

loader 的执行顺序是 从又右到左的

url-loader 解析图片

module: {
    rules: [
        {
            test: /.js$/,
            use: 'babel-loader'
        },
        {
            test: /.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /.(png|jpg|gif|jpeg)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: { // 图片大小的限制 如果小于 10k 转成 base64 格式
                        limit: 10240
                    }
                }
            ]
        }
    ]
}

webpack 文件监听

  1. 启动 webpack 命令时,带上 --watch 参数
    • 缺点是: 每次需要手动刷新浏览器
  2. 在配置 webpack.config.js 中设置 watch: true
watch: true,
watchOptions: {
    // 默认为空,不监听文件或文件件,支持正则
    ignored: /node_modules/,
    // 监听发生变化后等待 xxx 毫秒去执行,默认 300
    aggregateTimeout: 300,
    // 判断文件是否发生变化,通过不停的询问系统指定文件有没有变化实现,默认每秒问 1000 次
    poll: 1
}

热更新 webpack-dev-server

热更新 使用 webpack-dev-middleware

热更新的原理分析

  1. Webpack Compile
  1. HMR (Hot Module Replacement) Server:
  1. Bundle Server:
  1. HMR Rumtime:
  1. bundle.js

热更新的过程

  1. 热更新的启动阶段
  1. 更新阶段

文件指纹

Hash

Chunkhash

Contenthash

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name][chunkhash:8].js'
  },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'img/[name][hash:8].[ext]'
                        }
                    }
                ] 
            },
            {
                test: /.css$/,
                use: [
                    // 'style-loader', 这个是把 css 放到 style 里面和用  MiniCssExtractPlugin 有冲突,它是把 css 放到一个独立的文件中
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
        ]
    }
  mode: 'production',
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][contenthash:8].css'
        })
    ]
}

:8 意思是只取前 8 位

代码压缩

JS 文件的压缩

css 压缩

new OpeimizeCssAssetsPlugin({
    assetNameEegExp: /\.css$/g,
    cssProcessor: require('cssnano')
}),

html 压缩

npm i html-webpack-plugin -D
new HtmlWebpackPlugin({
    // 模板 所在的位置
    template: path.join(__dirname, 'src/index.html'),
    // 指定打包后的文件名称
    filename: 'index.html',
    // 声明 HTML 使用什么 chunks
    chunks: ['index'],
    // 把引入的 js 或 css 自动注入
    inject: true,
    minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
    }
})



标签:文件,配置文件,webapck,js,webpack,小白篇,path,loader,css
来源: https://www.cnblogs.com/ecplko/p/14059261.html