webpack的基本使用

webpack的基本使用

这篇文章主要讲如何把一个简单的页面用webpack打包，前提是你已经安装好了node.js。我这里用了个时钟页面，里面只用到了css和js，主要目录是这样的。在最后给出资源文件。

Clock.html
index.js
style.css

下面来看看如何使用webpack，首先在自己文件所在的目录执行下面命令，执行完后，目录底下增加了一个package.json文件。

npm init -y

npm init 用来初始化生成一个新的 package.json 文件。如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的 package.json 文件。

然后在本地安装webpack和webpack-cli（cli用于在命令行中运行 webpack），使用命令

npm install webpack webpack-cli --save-dev

webpack也可以全局安装，但是官方文档建议本地安装。

这条命令执行完，目录底下会新增node_modules文件夹和package-lock.json文件。

为了导入我们的css文件，你需要在module 配置中安装并添加 style-loader 和 css-loader，使用以下命令

npm install --save-dev style-loader css-loader

执行完后，相关的文件就会下载到node_modules文件夹中。

现在我们把目录结构改一下,新增两个文件夹和一个配置文件。

|-dist
  |-Clock.html
|-src
  |-index.js
  |-style.css
|-webpack.config.js

src就是我们原本的资源文件了，放了一个js文件和css文件，dist放的则是我们最后显示的文件。

下面我们来看看配置文件。在 webpack 4 中，可以实现不用配置，只用命令行，但是这样有时候很繁琐，还是需要配置文件来简化操作。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

这里entry是我们的入口，output是我们的输出，输出会在项目文件夹下的dist文件夹里生成一个bundle.jsw文件。

module是我们的模块，这里定义了凡是以.css结尾的文件都使用style-loader和css-loader加载。

我们别忘了在index.js的首行导入我们的css文件。

import './style.css';

然后我们可以运行我们的文件了。命令可以是

npx webpack --config webpack.config.js

如果这里没有–config选项的话，会默认去找名字是webpack.config.js的文件，如果有的话就会按照这个配置文件去执行，所以我们其实可以不用config选项，这样命令就只需

npx webpack

npx命令会自动去运行webpack的二进制文件。这句命令等同于

./node_modules/.bin/webpack

我们还可以修改package.json文件，在script中添加一句,记得在test后面加逗号。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack"
  },

然后我们就可以用npm的语句来执行。

npm run build

执行之后就会跟我们先前说的，在dist文件夹生成boundle.js，这个是我们前面自己定义的。

然后在Clock.html文件中引入boundless.js就可以了。

如果有需要可以去我的github下载文件，Clock下载