Webpack 学习笔记（0）

https://webpack.docschina.org/guides首先贴个webpack官方中文教程网站

为什么要使用webpack？

当我在js代码里使用import的时候，我的chrome居然报错了？？？

不是说一般现在的浏览器都支持es2015的语法嘛？？？懵逼，所以我需要一个打包软件

首先是安装webpack 的命令：

npm install --save-dev webpack

如果你使用 webpack v4+ 版本，你还需要安装 CLI

npm install --save-dev webpack-cli

可以在package.json中写入：

"scripts": {
    "build": "webpack --config webpack.config.js"
}

就可以直接试用npm run build 来使用webpack打包

注意这个webpack --config webpack.config.js

这个webpack.config.js是我们需要在项目里面建立的一个文件，也就是webpack打包的配置文件

目前的话，目录长这样（忽视那个index1.html和.vscode)

src里放开发的源码和资源，dist里放打包后的代码，

下面直接放webpack.config.js的内容：

const path = require('path');

module.exports = {
  entry: {
    app: "./src/index.js",
    print: "./src/print.js"
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};

entry代表入口，里面的内容例如app: "./src/index.js"是指名字：路径，这个名字与下面的[name]相关；output指输出文件，分别有文件名和路径。

module表示使用什么module来处理文件，例如css后缀的文件使用style-loader和css-loader处理，如果编写的是react项目的话可以使用babel处理

待续。。。

Webpack 学习笔记（0）

猜你喜欢