webpack打包原理

概念

webpack是一個打包模塊的機制,把依賴的模塊轉化成能夠表明這些包的靜態文件

做用

• 打包
  • 能夠把多個JavaScript文件打包成一個文件, 減小服務器壓力和下載寬帶
• 轉換
  • 把擴展語言轉換成普通的JavaScript語言,讓瀏覽器識別更順利運行
• 優化
  • 前端變的愈來愈複雜後,性能也會遇到各類問題,webpack肩負起優化和提高的責任

核心原理

• 一切皆模塊
  • js,css,image和html文件均可以視爲模塊,經過require加載
• 按需加載
  • Webpack使用許多特性來分割代碼而後生成多個「bundle」文件，經過異步加載部分代碼來實現按需加載功能

打包原理

• 識別入口文件, 分析代碼, 獲取模塊依賴, 而且將代碼打包爲瀏覽器能夠識別的代碼
• 遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle

如何配置

• webpack.config.js

module.exports = {
// 配置打包選項  development開發環境
mode: 'development', // production 生產環境
// 指定入口文件：要打包的文件
entry: './src/js/index.js',
// 指定輸出文件：打包以後的文件
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.min.js'
},
// 配置資源的加載器 loader
module: {
    rules: [
    // 配置js的加載器（把ES6轉化爲ES3/5代碼）
    {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        //打包除這個文件以外的文件
        exclude: path.join(__dirname, './node_modules'),
        //打包包括的文件
        include: path.join(__dirname, './src')
    },
    // 配置css的加載器
    {
        // 匹配.css結尾的文件
        test: /\.css$/,
        // 配置css文件的加載器,處理順序：從右向左
        use: ['style-loader', 'css-loader']
    },
    // 配置less的加載器
    {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
    }
    ]
},
// 配置插件
plugins: [
    new CleanWebpackPlugin(),
    // 動態生成html
    new HtmlWebpackPlugin({
    title: '測試標題',
    template: 'index.html'
    })
],
// 配置實時預覽環境 
devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 5000
}
}

複製代碼

• mode配置環境是開發環境仍是生產環境
• entry指定入口文件
• output指定輸出文件
• module裏的rules配置js的加載器
• modeule裏的loader配置資源加載器
• plugins配置插件