目錄結構
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/
}
}
最後
爲了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成爲全棧工程師,乃至架構師的路上披荊斬棘。在這裏給大家推薦一個前端全棧學習交流圈:866109386.歡迎大家進羣交流討論,學習交流,共同進步。
當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有有效資源還是很有必要的。
最後祝福所有遇到瓶疾且不知道怎麼辦的前端程序員們,祝福大家在往後的工作與面試中一切順利。