webpack 静态资源集中输出的方法示例


Posted in Javascript onNovember 09, 2018

目录结构

webpack 静态资源集中输出的方法示例

copy-webpack-plugin

工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图、开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片。打包时保留这些静态资源,直接打包到制定文件夹

安装依赖

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

webpack.config.js

  • from:要打包的静态资源目录地址,这里的__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: {
    //规则
    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'
    }])
  ],
  //开发服务
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    host: '192.168.1.9',
    compress: true, //服务端是否启用压缩
    port: 1717
  },
  watchOptions: {
    //检测修改的时间,以毫秒为单位
    poll: 1000,
    //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存,不进行打包操作
    aggregateTimeout: 500,
    //不监听的目录
    ignored:/node_modules/
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
用原生js做单页应用
Jan 17 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
详解puppeteer使用代理
Dec 27 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
vue中如何去掉空格的方法实现
Nov 09 #Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 #Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 #Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 #Javascript
webpack4.x CommonJS模块化浅析
Nov 09 #Javascript
angular4笔记系列之内置指令小结
Nov 09 #Javascript
node版本管理工具n包使用教程详解
Nov 09 #Javascript
You might like
PHP安装全攻略:APACHE
2006/10/09 PHP
Adodb的十个实例(清晰版)
2006/12/31 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
学习Vue组件实例
2018/04/28 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
全球立体声:World Wide Stereo
2018/09/29 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
机电一体化应届生求职信
2014/08/09 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
小马王观后感
2015/06/11 职场文书