webpack 打包本地静态资源

如何使用webpack打包独立页面

初始化

首先我们需要在项目根目录执行npm init来初始化（一路回车）

安装webpack

首先在项目文件夹打开命令窗，然后执行命令

npm install webpack webpack-cli --save-dev

在项目根目录新建webpack.conf.js用来配置webpack

const path = require('path') //文件路径处理
const htmlWebpackPlugins = require('html-webpack-plugin')//引入处理html的插件

module.exports = {
  // 输入路径配置
  entry: path.resolve(__dirname, './src/index.js'),
  // 输出文件名和路径配置
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, './dist')
  },
  // 引入插件配置
  plugins: [
    new htmlWebpackPlugins({
      // 输出文件名
      filename: 'perfrom.html',
      // 所引用模板文件位置
      template: path.resolve(__dirname, './src/html/perfrom.html'),
      // js 文件插入的位置
      inject: 'body'
    }),
    //引入多个html时需要配置多个
    new htmlWebpackPlugins({
      // 输出文件名
      filename: 'perfrom-exeuctor.html',
      // 所引用模板文件位置
      template: path.resolve(__dirname, './src/html/perfrom-exeuctor.html'),
      // js 文件插入的位置
      inject: 'body'
    }),
    
  ],
  // 文件类型转换配置
  module: {
    rules: [
        {
          // 正则匹配 html 文件
          test: /\.html$/,
          use: [
            {
              // 引入 html 文件加载插件
              loader: 'html-loader'
            }
          ]
        },
        {
          // 正则匹配 css 文件
          test: /\.css$/,
          use: [
            {
              // 引入 style 文件加载插件
              loader: 'style-loader'
            },
            {
              // 引入 css 文件加载插件
              loader: 'css-loader'
            }
          ]
        },
        {
            // 正则匹配 js 文件
            test: /\.js$/,
            exclude:/(node_modules| js)/,
            use: [
              {
                loader: 'babel-loader',
                options:{
                    presets:['es2015']
                }
              },
             
            ]
          },
      ]
  }
}

改写npm命令,在package.js中的script部分进行修改

"scripts": {
"dev": "webpack --mode development --config ./webpack.conf.js",
"build": "webpack --mode production --config ./webpack.conf.js"
},
现在打包变成了 npm run dev

一般我们的项目，打包时不止需要打包js文件，还有html-css-font等文件资源，所以我们还需要继续执行以下命令

安装处理html文件的插件	
npm install html-webpack-plugin --save-dev
安装帮助webpack处理css文件的插件
npm install css-loader --save-dev
安装帮助webpack解析html文件的插件
npm install html-loader --save-dev
安装帮助webpack将打包好的样式以style的方式插入html插件
npm install style-loader --save-dev

调整项目结构

新建src文件夹,里边放着我们需要的文件资源,另外新建一个入口文件Index.js，将需要用到的css文件配入到里边

import './css/normalize.css'
import './css/perfrpm-ele.css'
import './css/perfrpm-molding.css'
import './css/perfrpm-molding-extral.css'
import './css/CostCalculation.css'


import './css/perfrpm.css'
import './css/element.css'

const App = function () {
  var dom = document.getElementById('app')

}

new App()

最后就是在命令行输入npm run dev打包

完成后可以将打包好的dist文件夹拿去发布啦