webpack

webpack

一、 准备

新建项目文件

cd 项目文件夹
npm init -y

二、安装

·局部安装
npm install --save-dev webpack@<version>
npm install --save-dev webpack-cli

·全局安装
npm install --global webpack
npm install --save-dev webpack-cli

安装后文件目录

三、创建一个 bundle

将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来，源代码是用于书写和编辑的代码。分发代码是构建过程产生的代码最小化和优化后的 输出(output) 目录，最终将在浏览器中加载：

新建dist/index.html 新建src/index.js

四、使用一个配置文件

在 webpack v4 中，可以无须任何配置，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在 terminal(终端) 中手动输入大量命令要高效的多，所以让我们创建一个配置文件：

新建webpack.config.js

webpack.config.js

entry

string | [string] | object { : string | [string] } | (function: () => string | [string] | object { : string | [string] })

简单规则：每个 HTML 页面都有一个入口起点。单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。

module.exports = {
  //...
  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js'
  }
};

输出(output)

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个 entry 起点，但只指定一个 output 配置。

module.exports = {
  entry: {
    app: './src/app.js',
    //search: './src/search.js'
  },
  output: {
    filename: '[name].js',//app.js
    path: __dirname + '/dist'
  }
};

打包

npx webpack

打包非js的文件用loader

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：

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

 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'
+         ]
+       }
+     ]
+   }
  };

Plugin

插件用法位置

安装html-webpack-plugin 自动修改插入文件插件

npm install --save-dev html-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

安装clean-webpack-plugin将dist文件中无用的文件删除

npm install --save-dev clean-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
var path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [
  new HtmlWebpackPlugin(),
  new CleanWebpackPlugin()
  ]
};

安装 webpack-dev-server创建一个本地服务
最简单的方法是和webpack-cil一起用

npm install webpack-dev-server --save-dev

通过来自 webpack-dev-server 的这些选项，能够用多种方式改变其行为。这里有一个简单的例子，会 gzip(压缩) 和
serve(服务) 所有来自项目根路径下 dist/ 目录的文件：

var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
var path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [
  new HtmlWebpackPlugin(),
  new CleanWebpackPlugin()
  ],


   devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

在packjson中写入

{
  "scripts": {
    "serve": "webpack serve"
  }
}

启动

npm run serve