Webpack安装与使用

 

webpack是一个 用于现代JavaScript应用程序的静态模块化打包工具。

学习并记录Webpack的基本使用

1、安装node  

进入node官网https://nodejs.org/zh-cn/（nodejs中文网）

下载完成之后进行解压并配置环境变量

2、安装webpack

打开控制台进入需要安装的文件路径并输入npm init 生成package.json文件

在控制台输入 npm install webpack --save-dev 进行局部安装webpack

 安装后会出现以下文件

 

 在根目录下新建webpack.config.js文件，在根目录下新建html文件，以及src文件夹用来存放写入的js文件,并将js文件

在main.js中引入其他js文件

在命令行输入webpack ./src/main.js ./dist。即可将js文件打包到根目录下的dist目录下（自动生成bundle.js文件）

补：会遇到以下问题 

此时在webpack.config.js中进行配置，即可

module.exports = {
    mode:"development"，
}

3、对webpack进行配置

配置

在根目录新建webpack.config.js文件，并进行一下的配置

//引入node的path模块
const path = require("path");

//通过CommentJs的module定义一个导出配置 ，当指定webpack命令时会自动识别入口和出口

module.exports = {
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"dist"),//path必须写绝对路径，所以这里使用动态的方式获取文件的路径
        filename:"bundle.js"
    },//配置出口，以上配置是固定的必须写的
    module:{
        
    },
    mode:"development"
}

配置完成之后，使用webpack命令即可对js文件进行打包进行打包

4、打包css文件

执行npm install css-loader --save-dev 以及npm install style-loader --save-dev 

进行配置

5、对图片进行打包

执行npm install url-loader --save-dev 和npm insatll file-loader --save-dev

进行配置

module:{
        rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
         {
            test: /\.(png|jpe?g|gif)$/i,
            loader: 'file-loader',
            options: {
            name: '[path][name][hash:8].[ext]',//配置打包的图片路径、文件名、以及文件类型
        },
      },
        ],
      },
    ],
    },

6、将ES6转换为ES5

webpack打包时会发现，ES6语法没有被转换为ES5语法，这就意味着有些不能支持ES6的浏览器没办法很好的运行我们的代码，所以我们希望能够将ES6语法转换为ES5语法

运行npm install babel-loader --save-dev

在webpack.config.js中配置

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}
选项 

7、在webpack中配置Vue

运行 npm install vue --save