Webpack_牛客博客

图片说明

ES Moudule模块引入规范
引入：import from 导出：export default

CommonJS模块引入规范
引入：require() 导出：module.exports

webpack核心定义 模块打包工具

webpack安装

node + 进入文件夹npm init(符合node规范) + npm install webpack webpack-cli -g 全局安装不推荐

npm uninstall webpack webpack-cli -g 全局卸载webpack

node + 进入文件夹npm init(符合node规范) + npm install webpack webpack-cli -D 项目内安装

npx webpack -v 查看当前目录webpack

webpack配置

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    mode: 'production', // 打包文件压缩 developmen 不压缩
    devtool: 'source-map',  // 映射关系 inline放在index.js里 cheap具体到行不具体到列 module loader错也会提示 eval
    entry: {
        main: './src/index.js',    // 在哪开始打包
        sub: './src/index.js',    // 打包两次
    },
    devServer: {
        contentBase: './dist',  // 起服务器  可以发ajax请求 ajax请求必须通过http方式发送
        open： true,   // 自动打开浏览器
        port: 8080,   // 默认端口号
        hot: true,   // 开启HMR  热模块更新
        hotOnly: true,  // 即便HRM未生效也不让浏览器自动刷新
        proxy: {   // vue react 底层都使用webpackDevServer而webpackDevServer支持proxy
            '/api': 'http://localhost:3000',
        },
    },
    module: {       // 规则
      rules: [
      {
        test: /\.js$/,   // es6 babel 配置
        exclude: /node_modules/,  //  如果你JS文件在node_modules里面就不使用
        loader: "babel-loader"    // 打通babel和webpack
        options: {
            presets: [["@babel/preset-env",{      //  业务代码时用这个
                        targets: {
                            chrome: "67",  //  打包运行在大于67版本谷歌浏览器 就不用babel/polyfill
                        },
                        useBuiltIns: 'usage'  //  当我做babel/polyfill填充时候 按需加载
                     }]],   //  配置babel preset    语法转换
            "plugins": [["@babel/plugin-transform-runtime",{   //  库代码时用这个  不污染全局环境
                            "corejs": 2,
                            "helpers": true,
                            "regenerator": true,
                            "useESModules": flase
                       }]]
         }
      },
      {
        test: /\.(jpg|png|gif)$/,   // 图片配置
        use: {
          loader: 'url-loader', // 需要安装  'url-loader'  文件小用，直接将图片转成base64放到js文件里
          options: {
             // placeholder 占位符
             name: '[name]_[hash].[ext]',   // 打包后名字不变
             outputPath: 'images/',   // 图片输出文件夹
             limit: 20480,     // 图片大小超过20480字节(20kb)就会采用 'file-loader'
          }
        }
      },
      {
        test: /\.scss$/,   // 样式配置
        use: [
            'style-loader',    // 挂载css到head下
            {
                loader: 'css-loader',    // 整合css
                options: {
                    importLoaders: 2,  // 嵌套sass文件也不会有问题
                    modules: true, // 开启css模块化
                }
            },
            'sass-loader',
            'postcss-loader'    // 配置文件见下方代码
        ],  // 执行顺序 下到上 右到左
      },
      {
        test: /\.css$/,   // 样式配置
        use: [
            'style-loader',    // 挂载css到head下
            'css-loader',    // 整合css
            'postcss-loader'    // 配置文件见下方代码
        ],  // 执行顺序 下到上 右到左
      },
      {
        test: /\.(eot|ttf|svg)$/,   // 字体文件配置
        use: {
          loader: 'file-loader',
        }
      },
    ]
    },
    output : {           //  打包后
      filename: '[name].js',    // 打包后的名字 取entry的键值
      path: path.resolve(__dirname,'dist'), // 打包后放在哪个文件夹下  __dirname表示webpack默认所在文件
      publicPath: 'http://cdn.com.cn',  // index.js引入js前缀地址
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'    // 自定义新建index.html模板
        }),
        new CleanWebpackPlugin(['dist']), // 打包前删除dist目录
        new webpack.HotModuleReplacementPlugin(),     //  开启HMR
    ], 
    // htmlWebpackPlugin 会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
    
}

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer') // autoprefixer 插件 添加厂商前缀 适配浏览器
    ]
}

webpack-cli 可以在命令行里正确运行webpack命令

webpack核心概念 1. Loader是什么(module -> rules) webpack不能识别非js结尾的后缀模块，loader帮忙识别出来的一个打包方案。 2. plugins是什么 webpack 插件使打包更便捷可以在webpack运行到某个时刻的时候，帮你做一些事情类似生命周期函数 3. sourceMap是什么 存储着打包后的index.js文件每一行代码对应源码里面的哪个位置影响打包速度需要构建映射关系 4.webpackDevServer是什么 模拟服务器特性自动打开浏览器 5.Hot Module Replacement是什么 可以在写css时候方便调试不会刷新页面而是直接替换css js的话需要module.hot.accept 6.Babel处理ES6 安装：npm install --save-dev babel-loader @babel/core 打通babel和webpack 配置: module rules 安装: npm install @babel/preset-env --save-dev 用来翻译安装：npm install --save @babel/polyfill 用来提供新方法在业务代码中 import "@babel/polyfill" 提高开发效率

// package.json
"scripts": {
    "bundle": "webpack" //最原始打包webpack 最麻烦每次需执行
    "watch": "webpack --watch"   // 时刻监听代码变化 自动打包
    "start": "webpack-dev-server" // 不但可以时刻监听代码变化自动打包还会自动刷新浏览器 可以自动打开浏览器 可以起服务器 dist目录放在内存里
    //"middleware": "node server.js" // 当运行npm run middleware的时候自己写一个服务器
}