webpack：是一个模块打包器
1.安装 ：
cnpm install webpack webpack-cli -D
2. webpack打包文件步骤 ：
1、在项目下创建一个 webpack.config.js 文件
2、对webpack.config.js文件进行配置工作
在项目下创建一个入口文件src目录 ，该目录中创建一个入口文件xx.js
在项目下创建一个出口文件dist目录 该目录下的出口文件会通过webpack执行生成
3、项目下创建一个html文件 连入出口的bundle.js文件
4、执行 webpack
3.项目根目录下 配置webpack.config.js文件 也就是配置入口和出口
var path = require("path");
模块的暴露
module.exports = {
entry : "./src/entry.js",//入口文件配置项
output: {
path:path.resolve(__dirname,"dest"), 出口文件的路径一般都用绝对路径
filename : "bundle.js"
}
}
4.测试打包项目
目录结构 ：
通过 ： npm run dev（在package.json中配置好 Scripts:{ "dev":"webpack" }）
5.实现打包多个相互依赖的js文件过程
通过 require()方法 在入口文件中引入
module.exports = { } 模块暴露
6.样式的打包 ： 通过安装loader加载器 可以将静态的样式文件一同打包到bundle.js文件中 通过下面命令安装加载器
安装该插件 ： npm install css-loader style-loader
在entry.js 中导入样式 ：
require("!style-loader!css-loader!../css/style.css"); 静态资源导入需要 加 !,必须先导入style-loader
7.实现自动监听项目配置文件 不需要每次手动运行 npm run dev
核心思想 ： 修改 package.json文件
"build":"webpack --watch" 此时运行 npm run build 即可实现自动监听