webpack工程搭建2

Posted 2021-11-30 ccdat

 

const path = require(‘path‘);
const webpack = require(‘webpack‘);
const htmlWebpackPlugin = require(‘html-webpack-plugin‘);
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
const CopyWebpackPlugin = require(‘copy-webpack-plugin‘);
const { BundleAnalyzerPlugin } = require(‘webpack-bundle-analyzer‘);

module.exports = {
  node: {
    fs: "empty"
  },
  entry: {
    index: ‘./src/index.js‘,
    vendor: [
      ‘./src/file/pdfmake.min.js‘,
      ‘./src/file/vfs_fonts.js‘
    ]
  },
  output: {
    filename: ‘[name].bundle.js‘,
    path: path.resolve(__dirname, ‘dist‘)
  },
  module:{
    rules:[
        {
            test:‘/\\.(js|jsx)$/‘,
            use:[{
                loader:‘babel-loader‘,
                options: {
                  presets: [
                      "env", "react"
                  ]
                }
            },{
              loader:‘babel-preset-es2015‘,
              options: {
                presets: [
                    "es2015"
                ]
              }
            },{
              loader:‘babel-preset-stage-2‘,
              options: {
                presets: [
                    "stage-2"
                ],
                "plugins": ["transform-runtime"]
              }
            }],
            exclude:/node_module/
        }
    ]
  },
  plugins: [
    new CleanWebpackPlugin([‘dist‘]),
    new HtmlWebpackPlugin({
      title: ‘测试输入‘,
      template: ‘src/template/index.html‘
    }),
    new CopyWebpackPlugin([{
      from:__dirname+‘/src/file‘, //打包的静态资源目录地址
      to:__dirname+‘/dist/file‘,
      ignore:["test.html"]
    }]),
    // https://www.cnblogs.com/vvjiang/p/9327903.html
    new webpack.optimize.CommonsChunkPlugin({
      names: [‘vendor‘],
      minChunks: Infinity,
      filename: ‘common.bundle.[chunkhash].js‘,
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: [‘manifest‘],
      filename: ‘manifest.bundle.[chunkhash].js‘,
    }),
    new webpack.HashedModuleIdsPlugin(),
    // new webpack.optimize.UglifyJsPlugin()
    // new BundleAnalyzerPlugin({ analyzerPort: 8919 })
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),//本地服务器所加载的页面所在的目录
    inline: true, //实时刷新
    port: 9000, //端口改为9000
    open:true // 自动打开浏览器
  }
};

{
  "name": "learn-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "node ./src/first.js",
    "build": "webpack --env.NODE_ENV=development",
    "product": "webpack --env.NODE_ENV=production",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^1.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "file-saver": "^2.0.1",
    "fs": "0.0.1-security",
    "html-webpack-plugin": "^3.2.0",
    "jszip": "^3.2.0",
    "webpack": "^3.8.1",
    "webpack-bundle-analyzer": "^3.1.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}