webpack4搭建前端开发项目
作者:互联网
目录
npm初始化项目
npm init
-
新建文件 webpack.config.js
-
新建文件夹 src, src/page,src/images,src/util,src/view
命令行中,在项目的根目录下 test-front,执行命令,安装开发环境
npm install webpack webpack-cli webpack-dev-server --save-dev
查看项目根目录下的 package.json文件
{
"name": "test-front",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "meiken",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}
正常的文件结构和效果
在一个login.html文件中引入了一个 js文件和一个css文件,就产生了效果了,既然就这么就能开发,为什么还要使用webpack进行打包呢?目前理解不是很深,只能边使用边体会。
JS打包
编辑 webpack.config.js 文件添加
var config = {
entry:{
'login' : [__dirname + '/src/page/login/index.js'],
},
output:{
path: __dirname +'/dist',
filename: 'js/[name].js'
},
};
module.exports = config;
根目录下,命令行中执行 webpack 打包命令:
src/page/login/login.js 被打包进了 dist/js/login.js中,很明显没有 html 也没有css
Html模版打包
命令行中执行命令:npm install html-webpack-plugin --save-dev
编辑 webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
//获取 html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
return {
template : __dirname + '/src/view/' + name + '.html',
filename : 'view/' + name + '.html',
inject : true,
hash : true,
chunks : ['common',name]
};
};
var config = {
entry:{
'login' : [__dirname + '/src/page/login/index.js'],
'logout' : [__dirname + '/src/page/logout/index.js'],
},
output:{
path: __dirname +'/dist',
filename: 'js/[name].js'
},
plugins:[
new HtmlWebpackPlugin(getHtmlConfig('login')),
new HtmlWebpackPlugin(getHtmlConfig('logout')),
]
};
module.exports = config;
login.html 文件中的 js文件和css文件的引入给移除掉
<html lang="en">
<header>LOGIN HEADER</header>
<body>
Hello login
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
执行命令:webpack 打包后,我们能在dist/biew/login.html 文件中找到 html文件引入了 login.js文件,却没有css文件,css文件需要我们进行单独打包,可以作为模块在js中引入
CSS打包
直接打包方式
执行命令:npm install css-loader style-loader --save-dev
编辑 webpack.config.js 文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
//获取 html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
return {
template : __dirname + '/src/view/' + name + '.html',
filename : 'view/' + name + '.html',
inject : true,
hash : true,
chunks : ['common',name]
};
};
var config = {
entry:{
'login' : [__dirname + '/src/page/login/index.js'],
'logout' : [__dirname + '/src/page/logout/index.js'],
},
output:{
path: __dirname +'/dist',
filename: 'js/[name].js'
},
plugins:[
new HtmlWebpackPlugin(getHtmlConfig('login')),
new HtmlWebpackPlugin(getHtmlConfig('logout')),
],
module : {
rules :
[
{
test : /\.css$/,
loader : ["css-loader"]
},
]
},
};
module.exports = config;
login/index.css 文件中内容
body{
background: #556655;
}
login/index.js 文件中内容
require('./index.css')
console.log("i am login")
执行 webpack 命令进行打包后,可以在 dist/js/login.js 中找到 function(n,t,e){(t=e(3)(!1)).push([n.i,"body{\n background: #556655;\n}",""]) 这样一段代码,说明css被打包了进来
css 单独打包
html 文件中要有
标签才能被加载进来
安装命令: npm install mini-css-extract-plugin --save-dev
编辑 webpack.config.js 文件
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
//获取 html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
return {
template : __dirname + '/src/view/' + name + '.html',
filename : 'view/' + name + '.html',
inject : true,
hash : true,
chunks : ['common',name]
};
};
var config = {
entry:{
'login' : [__dirname + '/src/page/login/index.js'],
'logout' : [__dirname + '/src/page/logout/index.js'],
},
output:{
path: __dirname +'/dist',
filename: 'js/[name].js'
},
plugins:[
//css 打包
new MiniCssExtractPlugin(
{
filename : 'css/[name].css',
}
),
new HtmlWebpackPlugin(getHtmlConfig('login')),
new HtmlWebpackPlugin(getHtmlConfig('logout')),
],
module : {
rules :
[
{
test : /\.css$/,
loader : [MiniCssExtractPlugin.loader,"css-loader"]
},
]
},
};
module.exports = config;
执行:webpack 打包,css文件被单独打包进了 css目录下,在 login.html中以 link的方式加载进了css文件
html-loader
安装命令:npm install html-loader --save-dev
在 view目录下新建 layout目录,新建 layout/html-header.html 文件
<head>
<title>Im Header</title>
</head>
login.html文件中引入
<html lang="en">
<%= require('html-loader!./layout/html-header.html') %>
<body>
Hello login
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
执行 webpack 打包命令,在dist/view/login.html 中能够找到引入的 html-header.html 中的内容
url-loader 加载图片
安装命令: npm install url-loader file-loader --save-dev
编辑 webpack.config.js文件
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
//获取 html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
return {
template : __dirname + '/src/view/' + name + '.html',
filename : 'view/' + name + '.html',
inject : true,
hash : true,
chunks : ['common',name]
};
};
var config = {
entry:{
'login' : [__dirname + '/src/page/login/index.js'],
'logout' : [__dirname + '/src/page/logout/index.js'],
},
output:{
path: __dirname +'/dist',
filename: 'js/[name].js'
},
plugins:[
//css 打包
new MiniCssExtractPlugin(
{
filename : 'css/[name].css',
}
),
new HtmlWebpackPlugin(getHtmlConfig('login')),
new HtmlWebpackPlugin(getHtmlConfig('logout')),
],
module : {
rules :
[
{
test : /\.css$/,
loader : [MiniCssExtractPlugin.loader,"css-loader"]
},
{
test : /\.(gif|png|jpg|woff|svg|eotttf)\??.*$/,
// loader : 'url-loader&limit=100&name=resource/[name].[ext]'
use :
{
loader :'url-loader',
options:
{
limit:100,
name: '[name].[ext]',
outputPath : 'resource/',
publicPath : '../resource/'
}
}
}
],
},
};
module.exports = config;
图片文件被单独打包到 dist/resource/ 目录下面
打包公共js代码
编辑 wbpack.config.js 文件
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
//获取 html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
return {
template : __dirname + '/src/view/' + name + '.html',
filename : 'view/' + name + '.html',
inject : true,
hash : true,
chunks : ['common',name]
};
};
var config = {
entry:{
'login' : [__dirname + '/src/page/login/index.js'],
'logout' : [__dirname + '/src/page/logout/index.js'],
},
output:{
path: __dirname +'/dist',
filename: 'js/[name].js'
},
plugins:[
//css 打包
new MiniCssExtractPlugin(
{
filename : 'css/[name].css',
}
),
new HtmlWebpackPlugin(getHtmlConfig('login')),
new HtmlWebpackPlugin(getHtmlConfig('logout')),
],
module : {
rules :
[
{
test : /\.css$/,
loader : [MiniCssExtractPlugin.loader,"css-loader"]
},
{
test : /\.(gif|png|jpg|woff|svg|eotttf)\??.*$/,
// loader : 'url-loader&limit=100&name=resource/[name].[ext]'
use :
{
loader :'url-loader',
options:
{
limit:100,
name: '[name].[ext]',
outputPath : 'resource/',
publicPath : '../resource/'
}
}
}
],
},
resolve :{
alias : {
util : __dirname + '/src/util',
page : __dirname + '/src/page',
service : __dirname + '/src/service',
image : __dirname + '/src/image',
}
},
//通用 js 打包
optimization : {
splitChunks:{
cacheGroups: {
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
//打包第三方类库
vendor: {
name: 'vendor',
chunks: 'initial',
test: /[\\/]node_modules[\\/]/,
minSize: 0,
minChunks: 1,
},
//打包重复出现的代码
base: {
name: "base",
chunks: "initial",
test: /[\\/]src[\\/]/,
minSize: 0,
filename : 'js/base.js',
minChunks: 2,
}
}
}
}
};
module.exports = config;
src目录下增加js文件 /util/mm.js
var config = {
};
var _mm = {
name : 'zhangsan',
printName : function(){
console.log('zhangsan')
},
};
module.exports = _mm;
在 page/login/index.js 和 page/logout/index.js 都引用 mm.js这个模块
var mm = require('util/mm.js')
mm.printName();
执行 webpack 打包后,dist/js 下多出一个 base.js的文件
代码地址
标签:webpack4,name,js,webpack,html,login,前端开发,css,搭建 来源: https://www.cnblogs.com/ainewbegin/p/12911660.html