WebPack安装使用

WebPack安装使用

安装

//cmd安装即可
//命令 npm install -g webpack webpack-cli
//查看是否安装成功 webpack -v
//新建一个nodejs工程进行接下来的操作

webpack合并JS

1. 根目录新建webpack.config.js文件

2. 写入以下配置

   //导入path模块(nodejs的内置模块)
   const path  = require("path");
   //定义打包规则
   module.exports = {
       entry: "./src/main.js", //入口
       output: {// js打包规则
           path: path.resolve(__dirname,"./dist"), //输出路径
           filename: "demo.js" //文件名称
       }
   };
   

WebPack合并CSS

1. 安装css-loader和style-loader

   1. 安装原因:

      1. Webpack本身只能处理JS,要处理其他类型文件就需要loader进行转换
      2. css-loader是将css加载到js中
      3. style-loader是让js认识css

2. 安装命令

   1. npm install --save-dev style-loader css-loader
      //package.json出现如下依赖证明安装成功
      "devDependencies": {
          "css-loader": "^5.0.2",
          "style-loader": "^2.0.0"
      }
      

3. 在src下建立css文件

4. 在main.js引入css(main.jss是程序入口)

   1. //引入js
      import user from './user'
      import query from './query'
      //引入css
      import style from './style.css'
      // require('./style.css')
      
      

5. 在webpack.config.js配置打包规则

   1. //定义打包规则
      module.exports = { 
          entry: "./src/main.js", //入口
          output: {//js打包规则
              path: path.resolve(__dirname,"./dist"), //输出路径
              filename: "demo.js" //文件名称
          },
          module: {//css 打包规则
              rules: [{
                  test: /\.css$/,//把项目中所有以.css结尾的文件打包
                  use: ["style-loader","css-loader"] //打包采用的loader
              }]
          }
      };
      

6. 运行项目