webpack打包jquery多页_运用webpack打包多页jquery项目

虽然已2019年了

不过有一些项目

照样须要用到jquery的

不过考虑到运用jquery的一堆兼容性问题

也为了能够顺遂地运用ES6来撸代码

研讨运用webpack+babel打包代码来宣布

几个重点：

1.为了将模块支解加载，不至于一个js文件过大，一个页面中运用多个js文件

2.由因而多页项目(多个html)，每一个页面运用的js文件都不一致

基于以上两点，须要设置多个进口文件

3.会把小图片转换成base64，所以能够css转成的js文件会比较大，所以css文件都零丁设置进口js

比方，我们有三个页面：index、share、assist

三个页面有通用的css文件：common.css

设置进口文件时，能够如许设置

entry: {

// 通用css

commoncss: path.resolve(__dirname, './src/css/common.css.js'),

// 主页

indexcss: path.resolve(__dirname, './src/css/index.css.js'),

index: path.resolve(__dirname, './src/index.js'),

// 页1

sharecss: path.resolve(__dirname, './src/css/share.css.js'),

share: path.resolve(__dirname, './src/share.js'),

// 页2

assistcss: path.resolve(__dirname, './src/css/assist.css.js'),

assist: path.resolve(__dirname, './src/assist.js'),

}

个中，common.css.js文件中，只需几行代码

import '../css/base.css';

import '../css/plugin.css';

import '../css/common.css';

common.css.js文件完毕

因为会有一些图片的base64，所以大小约莫100+KB

相似的另有index.css.js和share.css.js和assist.css.js

index.css.js以下

import '../css/index.css';

对，就一句话

打包出来的js文件大小就看引入了多少小图片了，平常几百KB

然后，要运用三个webpack的插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');

const jquery = require('jquery');

HtmlWebpackPlugin 用于打包出多个html文件

CopyWebpackPlugin 用于img标签，背面说

jquery 就是jquery，全局援用

webpack.config.js里的plugins设置以下

plugins: [

new webpack.ProvidePlugin({

$:"jquery"

}),

new CopyWebpackPlugin([{

from: __dirname + '/src/public/'

}]), // 吧src下public文件夹下的一切内容直接拷贝到dist(输出目次)下

new HtmlWebpackPlugin({

filename: 'index.htm',

template: 'src/index.html',

chunks: ['commoncss', 'indexcss', 'index'],

inject: 'true',

hash: true,

}),

new HtmlWebpackPlugin({

filename: 'share.htm',

template: 'src/share.html',

chunks: ['commoncss', 'sharecss', 'share'],

inject: 'true',

hash: true,

}),

new HtmlWebpackPlugin({

filename: 'assist.htm',

template: 'src/assist.html',

chunks: ['commoncss', 'assistcss', 'assist'],

inject: 'true',

hash: true,

})

]

src目次下的文件以下

index.js assist.js share.js是三个文件离别的进口文件

index.html assist.html share.html是三个文件的模板，html代码能够写在这里

(固然想用模板文件也是能够的，只需HtmlWebpackPlugin插件支撑)

dist文件夹以下

(为何是htm而不是html，是为了便于读者辨别模板文件和输出文件)

我们晓得，webpack打包不会打包HtmlWebpackPlugin的template里的img标签下的图片，所以在html里运用了img标签的图片都要放在public文件夹下，CopyWebpackPlugin这个组件会直接把图片复制过去

关于HtmlWebpackPlugin的详细参数的细则能够上网搜一下，许多这方面的内容

其他的比方loader、babel不在这篇文章想说的重点之列，不赘述

末了，附上webpack.config.js文件

let actName = 'yourProjectName';//

let actKV = {

name: actName,

entry: {

// 通用css

commoncss: path.resolve(__dirname, './src/css/common.css.js'),

// 主页

indexcss: path.resolve(__dirname, './src/css/index.css.js'),

index: path.resolve(__dirname, './src/index.js'),

// 分享页1

sharecss: path.resolve(__dirname, './src/css/share.css.js'),

share: path.resolve(__dirname, './src/share.js'),

// 分享页2

assistcss: path.resolve(__dirname, './src/css/assist.css.js'),

assist: path.resolve(__dirname, './src/assist.js'),

}

};

return {

entry: actKV.entry,

target: "web",

output: {

path: path.resolve(__dirname + '/dist/'+actName),

// publicPath: '.\\',

filename: 'js/[name].js',

// chunkFilename: "[name].chunk.[hash].js",

},

plugins: [

new webpack.ProvidePlugin({

$:"jquery"

}),

new CopyWebpackPlugin([{

from: __dirname + '/src/public/'

}]),

new HtmlWebpackPlugin({

filename: 'index.htm',

template: 'src/index.html',

chunks: ['commoncss', 'indexcss', 'index'],

inject: 'true',

hash: true,

}),

new HtmlWebpackPlugin({

filename: 'share.htm',

template: 'src/share.html',

chunks: ['commoncss', 'sharecss', 'share'],

inject: 'true',

hash: true,

}),

new HtmlWebpackPlugin({

filename: 'assist.htm',

template: 'src/assist.html',

chunks: ['commoncss', 'assistcss', 'assist'],

inject: 'true',

hash: true,

})

],

mode: 'development',

node: {

__filename: true,

__dirname: true

},

devtool: isProduction ? 'source-map':'inline-source-map',

devServer:{

inline: true,

open: true,

historyApiFallback: true,

// host: ip.address(),

host: 'localhost',

progress: true,

contentBase: "./dist/",

port: 3430,

historyApiFallback:true,

publicPath:'/src/',

proxy: {

'*': {

target: 'http://127.0.0.1:3430',

secure: false

}

},

},

resolve: {

alias: {

},

extensions: ['.js', '.less', '.css', '.vue', '.jsx'],

},

externals: {

},

module: {

rules: [{

test: /\.vue$/,

loader: 'vue-loader',

}, {

test: /\.js$/,

include: path.join(__dirname,'/src'),

exclude: path.resolve(__dirname, 'node_modules'),

use:[

{

loader: 'babel-loader',

query: {

presets: ['es2015']

}

}

]

}, {

test: /\.xml$/,

loader: "xml-loader"

}, {

test: /\.(css|less)$/,

loader: "style-loader!css-loader",

},

{

test: /\.(png|jpg|jpeg|gif|icon|webp)$/,

loader: 'url-loader',

options: {

limit: 16384,

name: 'images/[name].[hash:5].[ext]',

}

},

{

test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,

loader: "file-loader?&name=assets/fonts/[name].[ext]"

}, {

test: /\.txt$/,

loader: "text-loader"

},{

test: /\.jsx$/,

exclude: /node_modules/,

loaders: ['jsx-loader', 'babel-loader']

}]

},

}