目录结构
copy-webpack-plugin
工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片。打包时保留这些静态资源，直接打包到制定文件夹
安装依赖
cnpm install copy-webpack-plugin --save-dev
webpack.config.js
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/
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
