安装
1.node.js
2.npm install webpack -g
npm install webpack-cli -g
使用
命令：webpack (需要打包的文件) -o (打包后文件的名字(一般都是bundle.js)) --------------我的webpack版本是4.x所以中间要加一个-o
1.打包JS文件
打包命令 webpack main.js -o bundle.js
其中bundle.js是打包后自动创建的文件
原理是通过js文件之间的依赖关系，把多个js打包成一个js，这样页面就可以少写很多的
例如下面的例子 我通过main.js中导入exportFun.js，让两个js之间产生依赖关系，然后通过打包main.js来生成bundle.js，这样两个js就变成了一个
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
main.js
var efun = require('./exportFun.js')
document.write(efun.a() + efun.b())
exportFun.js
module.exports ={
a(){
return "aaaa"
},
b(){
return "bbbbb"
}
}
2.打包CSS
打包命令 webpack main.js -o bundle.js
1.安装css加载器
npm init //初始化一个packjson文件
npm install style-loader //将样式通过style标签插入头部
npm install css-loader //检查文件中是否有import引入
index.html和上面一样
main.js
var efun = require('./exportFun.js')
//这里注意 一定是先!style-loader在!css-loader
require('!style-loader!css-loader!./main.css')
document.write('<div>' + efun.a() + efun.b() + '</div>')
main.css
div{
width: 50px;
height: 50px;
border: 1px solid red;
}
3.打包css文件
需要安装两个加载器
npm i --save-dev style-loader css-loader
1.webpack.config.js（这个文件是手动创建的，名字固定，和package.json同一目录下）
module.exports = {
entry: './src/js/main.js', //需要打包的文件
output: {
path:__dirname + '/dist', //__dirname:当前项目路径
filename: 'bundle.js' //生成后的文件名
},
module:{
rules:[
{
test: /\.css$/,//这里不要加'' 由于我的webpack版本是4.X的和3.X的语法上有一些不一样
use: ['style-loader','css-loader']
}
]
}
}
main.js
require('../css/main.css')
document.write('<div>' + 'ssss' + '</div>')
其中dist文件夹和内容都是自动生成的所以不用特意去创建
4.搭建本地服务器
需要安装的第三方插件
npm i --save-dev webpack-cli webpack-dev-server
在package.json中的scripts中进行如下配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev":"webpack-dev-server --open"
},
在webpack.config.js中添加一个属性
devServer：{
//contentBase:为那一个文件夹提供本地服务，默认是根文件夹
port: '8081',
publicPath: './', //定义发布到服务器上面的默认路径，如果不设置会按照output中的publicPath设置
inline: true,//页面实时刷新
//historyApiFallback: //在SPA页面中,依赖html5的history模式
}
5.生成多个html页面(Plugin属性)
需要安装第三方插件
npm i html-webpack-plugin --save-dev
const htmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'production', //告知 webpack 使用相应模式的内置优化。
entry: {
bundle: './src/js/main.js', //需要打包的文件
bundle_two: './src/js/main_two.js'
},
output: {
path: path.resolve(__dirname, 'dist'), //__dirname:当前路径 'dist'为去存打包后资源的文件夹的名字
filename: 'js/[name].js', //生成后的文件名
publicPath: './' //定义目录 './'的意思是当前目录即./dirname/dist '/assest/' 指的是 _dirname/dist/assets
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', //生成的文件名字
template: path.resolve(__dirname, 'src/page/main.html'), //生成文件的 模板
inject: 'head', //打包生成的js,css和其他东西插入的位置
title: 'this is one page',
// hash: true,
chunks:['bundle'], //与上面entry中的key值对应，如果不标注这个属性，所生成的html页面导入的js文件将会是所有被打包后的js文件
minify: { //压缩代码
// collapseWhitespace: true,
// html5: true
}
}),
new htmlWebpackPlugin({
filename: 'index_two.html', //生成的文件名字
template: path.resolve(__dirname, 'src/page/main_two.html'), //生成文件的 模板
inject: 'head', //打包生成的js,css和其他东西插入的位置
title: 'this is second page',
// hash: true,
chunks:['bundle_two'], //与上面entry中的key值对应，如果不标注这个属性，所生成的html页面导入的js文件将会是所有被打包后的js文件
minify: { //压缩代码
// collapseWhitespace: true,
// html5: true
}
}),
// new UglifyjsWebpackPlugin() 压缩js代码
],
devServer: {
port: '8081',
inline: true
}
}
7.抽取公共部分与合并（这里的内容后续会修改。。有点乱）
需要安装的插件列表
package.json
{
"name": "webpacks",
"version": "1.0.0",
"description": "webpack小案例",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/weitapianzhi/webpack.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/weitapianzhi/webpack/issues"
},
"homepage": "https://github.com/weitapianzhi/webpack#readme",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.3.1",
"style-loader": "^1.0.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1",
"webpack-merge": "^4.2.2"
},
"dependencies": {}
}
base.config.js
const webpack = require('webpack')
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:{
'index':'./src/js/index.js',
},
output:{
path: path.resolve(__dirname,'../dist'),
filename:'js/[name].js',
publicPath:'./'
},
module:{
rules:[
{
test: /\.(css|sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
// {
// test: /\.js$/,
// exclude:/(node_modules|bower_components)/,
// use:{
// loader: 'babel-loader',
// options:{
// presets:['es2015']
// }
// }
// },
{
test:/\.(png|jpg|git|jpeg)$/,
use:[
{
loader: 'url-loader',
options:{
limit: 1300,
name:'img/[name].[hash:8].[ext]'
}
},
]
}
]
},
plugins:[
new htmlWebpackPlugin({
template:'./index.html',
filename:'index.html',
inject: 'head'
})
],
}
dev.config.js
const merge = require('webpack-merge')
const baseWebpack = require('./base.config.js')
module.exports = merge(baseWebpack,{
devServer:{
contentBase:'./dist',
inline: true
}
})
prod.config.js
const merge = require('webpack-merge')
const baseWebpack = require('./base.config.js')
module.exports = merge(baseWebpack,{
})
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
