快捷導航

webpack 靜態(tài)資源集中輸出的方法示例

更新時間：2018年11月09日 11:06:18 作者：渣渣輝

這篇文章主要介紹了webpack 靜態(tài)資源集中輸出的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

目錄結(jié)構(gòu)

copy-webpack-plugin

工作中會有一些已經(jīng)存在但在項目中沒有引用的圖片資源或者其他靜態(tài)資源（比如設(shè)計圖、開發(fā)文檔），這些靜態(tài)資源有可能是文檔，也有可能是一些額外的圖片。打包時保留這些靜態(tài)資源，直接打包到制定文件夾

安裝依賴

cnpm install copy-webpack-plugin --save-dev

webpack.config.js

from:要打包的靜態(tài)資源目錄地址，這里的__dirname是指項目目錄下，是node的一種語法，可以直接定位到本機的項目目錄中。
to:要打包到的文件夾路徑，跟隨output配置中的目錄。所以不需要再自己加__dirname。

const copyWebpackPlugin = require('copy-webpack-plugin');
...
  plugins: [
    new copyWebpackPlugin([{
      from: __dirname + '/src/public',
      to:'./public'
    }])
  ],

打包，運行

npm run build
npm run server

webpack.config.js全部代碼

const path = require('path');
const glob = require('glob');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PurifyCSSPlugin = require('purifycss-webpack');
const entry = require('./webpack_config/entry_webpack');
const webpack = require('webpack');
const copyWebpackPlugin = require('copy-webpack-plugin');
console.log(encodeURIComponent(process.env.type));
if (process.env.type == 'build') {
  var website = {
    publicPath: "http://pengrongjie.top:1717/"
  }  
} else {
  var website = {
    publicPath: "http://192.168.1.9:1717/"
  } 
}

module.exports = {
  // devtool: 'source-map',
  // 入口 
  entry: {
    entry: './src/entry.js',
    jquery: 'jquery',
    vue:'vue'
  },
  // entry:entry.path,
  // 出口
  output: {
    //絕對路徑
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: website.publicPath
  },
  // 模塊
  module: {
    //規(guī)則
    rules: [
      // {
      //   test: /\.css$/,
      //   use: [
      //     {
      //       loader:'style-loader'
      //     }
      //   ]
      // },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          // use: "css-loader"
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
          ]
        })
      },
      {
        test: /\.(png|jpg|gif)/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 5000,
            outputPath: 'images/',
          }
        }]
      }, {
        test: /\.(htm|html)$/i,
        use: ['html-withimg-loader']
      },
      // {
      //   test: /\.less$/,
      //   use: [{
      //     loader: 'style-loader'
      //   }, {
      //     loader: 'css-loader'
      //   }, {
      //     loader: 'less-loader'
      //   }]
      // }
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: { importLoaders: 1 }
          }, {
            loader: 'less-loader'
          },'postcss-loader'],
          fallback: 'style-loader'
        })
      },
      // {
      //   test: /\.scss$/,
      //   use: [{
      //     loader:'style-loader'
      //   },{
      //     loader:'css-loader'
      //   },{
      //     loader:'sass-loader'
      //   }]
      // },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: { importLoaders: 1 }
          }, {
            loader: 'sass-loader'
            },
            'postcss-loader'],
          fallback: 'style-loader'
        })
      },
      // {
      //   test:/\.(js|jsx)$/,
      //   use:{
      //     loader:'babel-loader',
      //     options:{
      //       presets:[
      //         'es2015',
      //         'react'
      //       ]
      //     }
      //   },
      //   //過濾掉，不編譯node_modules中的文件,
      //   exclude:/node_modules/
      // },
      {
        test:/\.(js|jsx)$/,
        use:{
          loader:'babel-loader',
        },
        //過濾掉，不編譯node_modules中的文件,
        exclude:/node_modules/
      }
      
    ]
  },
  //插件
  plugins: [
    // new webpack.ProvidePlugin({
    //   $:'jquery'
    // }),
    // new uglify()
    new htmlPlugin({
      minify: {
        removeAttributeQuotes: true
      },
      hash: true,
      template: './src/index.html'
    }),
    new ExtractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({
      paths:glob.sync(path.join(__dirname,'src/*.html')),
    }),
    new webpack.BannerPlugin('jie的注釋'),
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'jquery',
    //   filename: 'assets/js/jquery.min.js',
    //   minChunks:2
    // })
    new webpack.optimize.CommonsChunkPlugin({
      name: ['jquery','vue'],
      filename: 'assets/js/[name].js',
      minChunks:2
    }),
    new copyWebpackPlugin([{
      from: __dirname + '/src/public',
      to:'./public'
    }])
  ],
  //開發(fā)服務(wù)
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    host: '192.168.1.9',
    compress: true, //服務(wù)端是否啟用壓縮
    port: 1717
  },
  watchOptions: {
    //檢測修改的時間，以毫秒為單位
    poll: 1000,
    //防止重復(fù)保存而發(fā)生重復(fù)編譯錯誤。這里設(shè)置的500是半秒內(nèi)重復(fù)保存，不進行打包操作
    aggregateTimeout: 500,
    //不監(jiān)聽的目錄
    ignored:/node_modules/
  }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: