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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
日期 时间js控件
May 07 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
Vue实现移动端拖拽交换位置
Jul 29 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
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python中super的用法实例
2015/05/28 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
python Django模板的使用方法
2016/01/14 Python
python中logging库的使用总结
2017/10/18 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
logging level级别介绍
2020/02/21 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Python基于内置函数type创建新类型
2020/10/22 Python
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
干部外出学习心得体会
2016/01/18 职场文书