webpack简单介绍

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 即可实现自动监听