2. 原生JavaScript项目集成webpack本文详细介绍了在原生项目中集成webpack，在首页index.ht

项目初始化

创建npm项目

首先创建一个新文件夹，然后在终端执行如下命令，快速生成一个npm项目

npm init -y

创建webpack配置文件

在根目录下创建一个webapck.config.js文件，并加上基本配置。

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    }
}

然后安装webpack依赖

npm install webpack webpack-cli -D

创建入口文件

在根目录下创建src/index.js入口文件，并在 index.js 加入一行代码。

console.log('原生项目改造')

然后创建public/index.html模板文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生项目改造</title>
    <script src="../dist/bundle.js"></script>
  </head>
  <body></body>
</html>

配置package.json的build命令

"scripts": {
    "build": "webpack"
  },

初始化好项目文件之后，执行 npm run build 打包，就可以生成一个bundle.js文件。

首页移植

第一步：资源文件拷贝

将源码中的 html/css/js/img 文件拷贝到新项目中。

将index.html拷贝到src/index.html
将 js 目录拷贝到 src/js
将 css 目录拷贝到 src/css 现在目录结构如下图:

第二步：删除inde.html中所有link和script引用 对于首页中的 link 和 script 引入资源要进行删除

// 全部删除
<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/public.js" type="text/javascript"></script>
<script src="js/nav.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>

因为这些资源都会被打包进bundle.js，然后利用一个 webpack 的插件自动在 index.html 中引入 bundle.js。

第三步：使用html-webpack-plugin实现自动注入bundle

首先安装html-webpack-plugin插件

npm install -D html-webpack-plugin

然后配置webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 模板的名称
            filename: 'index.html',
            // 模板地址
            template: './src/index.html',
        })
    ]
}

执行npm run build1，在生成dist/index.html里面就会看到自动引入了bundle.js。