无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

webpack 静态数据資源集中化輸出的方式实例

时间:2021-04-05 02:54来源:未知 作者:jianzhan 点击:
copy-webpack-plugin工作中时会有一些早已存有但在新项目中沒有引入的照片資源或是别的静态数据資源(例如设计方案图、开发设计文本文档),这种静态数据資源有将会是文本文档,也是

copy-webpack-plugin

工作中时会有一些早已存有但在新项目中沒有引入的照片資源或是别的静态数据資源(例如设计方案图、开发设计文本文档),这种静态数据資源有将会是文本文档,也是有将会是一些附加的照片。装包时保存这种静态数据資源,立即装包到制订文档夹

安裝依靠

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

webpack.config.js

from:要装包的静态数据資源文件目录详细地址,这儿的__dirname就是指新项目文件目录下,是node的一种英语的语法,能够立即精准定位到该机的新项目文件目录中。 to:要装包到的文档夹相对路径,追随output配备中的文件目录。因此不用再自身加__dirname。
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: "" } else { var website = { publicPath: "" 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: './' new ExtractTextPlugin("css/index.css"), new PurifyCSSPlugin({ ')), 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/ }

之上便是文中的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用诺心互联网。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信