什么是文本pack

从本质上讲，Webpack是一个现代Javascript应用的静态模块打包工具，它可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

安装webpack

1 //全局安装2 npm install -g webpack3 //安装到项目目录4 npm install webpack --save-dev

webpack配置文件

const path = require(‘path‘)//_dirname 是 node.js 中的一个全局变量，它指向当前执行脚本所在的目录module.exports={ entry: ‘./src/main.js‘, // 要打包的文件入口 output: { path: path.resolve(__dirname, ‘dist‘), //打包后的绝对输出路径 filename: "bundle-text.js", // 打包输出后的文件名 },

//  配置loader 　　module: {      rules: [       {          test: /\.css$/,          use: [‘style-loader‘,‘css-loader‘] //use使用多个loader时，要从右向左写     }   ]   }

}

 loader: 

• 通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理
• 比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件
• Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置。

       test: 用来匹配loaders所处理文件的拓展名的正则表达式

       loader:loader的名称

// 配置图片，在小于limit给出字节数以下的转化为base64，大于limit给出的字节数时通过file-loader模块加载，显示原图片{ test: /\.(png|jpe?g|gif|svg|cur)(\?.*)?$/, loader: ‘url-loader‘, options: { limit: 10000, name: ‘img/[name].[hash:8].[ext]‘//打包后图片命名 }}

当重新打包后，运行项目会出现图片路径错误。这时候就要在output下重新添加publicPath：‘/打包后图片存储路径‘

ES6语法处理

在webpack中直接使用babel对应的loader。,babel是一种javascript编译器，它可以javascript编译成可以执行的版本

rules: [ //js 匹配所有的js，用babel-loader转译 排除掉node_modules { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules },