参考webpack官网:https://www.webpackjs.com/loaders/
demo:https://download.csdn.net/download/impossible1994727/12564299
dist:存放打包好的文件
src:存放写好的源文件
src下新建main.js:项目启动js
index.html,webpack.config.js
根目录文件夹下自动新增一个package.json文件
确定自己项目的入口,我的项目入口为main.js。
全局安装:npm install [email protected] -g
局部安装:npm install [email protected] --save-dev
const path=require('path');
module.exports = {
entry: './src/main.js',//设置项目的进入文件
output: {
path: path.resolve(__dirname, 'dist'),//设置项目打包到哪个文件
filename: 'test.js',//设置项目打包之后的文件名称
},
}
同时在index.html引入dist的test.js文件,在main.js中console.log('a'),做测试。
上述全部完成之后运行命令webpack,然后运行index.html文件,如果输出了a,则以上全部操作视为成功。
npm install --save-dev css-loader
npm install style-loader --save-dev
src下新建一个css文件夹,然后新建一个css/a.css的样式文件
修改webpack.config.js文件,在module.exports中添加对样式文件的解析。
module:{
rules:[
{
test: /\.css$/,
//使用多个loader,是从右向左读
use: ['style-loader', 'css-loader']
}
]
}
在main.js中引入css:require('./css/a.css')
上述全部完成之后运行命令webpack,然后运行index.html文件,如果a.css中的样式生效,则以上全部操作视为成功。
npm install --save-dev less-loader less
新建一个css/b.less的样式文件,写入
@fontsize:50px;
body{
font-size: @fontsize;
}
在main.js中用require引入less文件:require('./css/b.less');
在webpack.config.js的module.rules添加一下内容:
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
上述全部完成之后运行命令webpack,然后运行index.html文件,如果b.less中的样式生效,则以上全部操作视为成功。
如果运行webpack报错,则去package.json文件中修改less-loader的版本号为:4.1.0,运行npm install。
再运行webpack。
npm install --save-dev file-loader
npm install --save-dev url-loader
修改webpack.config.js中module.rules:
{
test:/\.(png|jpg|gif|jpeg)$/,
use:[{
loader:'url-loader',
options:{
limit:8192,
name:'img/[name][hash:8].[ext]',//img:打包到dist文件中的哪个文件夹,[name]:图片本名,[hash:8]:保留8位hash,.[ext]:保留图片原本扩展名;
}
}]
}
//打包后图片所在位置:dist/img
//打包后图片名称(假设本名为close.png):close01234567.png
在css中引入背景图片。
上述全部完成之后运行命令webpack,然后运行index.html文件,如果引入的图片文件显示了,则以上全部操作视为成功。
用处为,将js中的es6语法转化为普通js。
npm install babel-loader@7 babel-core babel-preset-es2015 --save-dev
在webpack.config.js的module.rules添加以下内容:
{
test:'/\.js$/',
exclude:/(node_modules|bower_components)/,//exclude:排除;不对其内容做转换
use:{
loader:'babel-loader',
options:{
presets:['es2015']
// presets:['@babel/preset-env'],//或者这一个
}
}
}
可以测试在main.js中写入:const a='123';console.log(a);
上述全部完成之后运行命令webpack,然后运行index.html文件,如果main.js中写的const被转换,则以上全部操作视为成功。
npm install vue --save
在main.js中引入vue:
import Vue from 'vue';
const app=new Vue({
el:'#app',
})
在index.html中写一个id=app的div标签;
上述全部完成之后运行命令webpack,然后运行index.html文件,如果没有报错,则以上全部操作视为成功。
如果打包报错信息为:you are using the runtime-only ...
则在webpack.config.js的module.exports中配置:
resolve:{
alias:{//别名
'vue$':'vue/dist/vue.esm.js'//当页面引用vue的时候,指向的路径为vue/dist/vue.esm.js
}
}
npm install vue-loader vue-template-compiler --save-dev
在webpack.config.js的module.rules添加以下内容:
{
test:/\.vue$/,
use:['vue-loader']
}
如果打包报错,则修改package.json中vue-loader的版本号为:13.0.0,运行npm install .
修改webpack.config.js中module.exports.resolve为:
resolve: {
extensions: ['.js', '.css', '.vue'],//配置此项,引用文件可以省略后缀名
alias: {//别名
'vue$': 'vue/dist/vue.esm.js'
}
},
在main.js中引入写的.vue文件。
import Vue from 'vue';
import Avue from './vue/a';//这里为引入的文件,配置了resolve的extensions,所以vue/a==vue/a.vue
new Vue({
el:"#app",
components:{Avue},
template:" "
})
上述全部完成之后运行命令webpack,然后运行index.html文件,如果引入的vue文件显示了,则以上全部操作视为成功。
修改webpack.config.js,添加plugins;
plugins:[
new webpack.BannerPlugin('最终版权归我所有')
]
上述全部完成之后运行命令webpack,然后运行index.html文件,如果打包的js文件最上部有注释文字“最终版权归我所有”,则以上全部操作视为成功。
作用:自动生成index.html文件(可以指定模板),打包好的js文件自动通过script标签引入body中。
npm install html-webpack-plugin --save-dev
修改webpack.config.js的plugins 为以下内容:
plugins:[
new webpack.BannerPlugin('最终版权归我所有'),
new HtmlWebpackPlugin({
template:"index.html"//以根目录的index.html文件为模板,生成dist文件夹下面的index.html文件,并且将打包的js文件自动插入dist/index.html中
})
]
若打包报错,修改package.json中html-webpack-plugin的版本号为3.2.0,运行npm install.
删除webpack.config.js中的output:plublicPath:"/dist":已经不需要对打包后的涉及url的路径做转换了。
上述全部完成之后运行命令webpack,然后运行dist/index.html文件,如果页面展示正确,则以上全部操作视为成功。
npm install [email protected] --save-dev
修改webpack.config.js
const uglifyJsPlugin=require('uglifyjs-webpack-plugin');
//修改module.exports下的plugins为以下内容
plugins:[
new webpack.BannerPlugin('最终版权归我所有'),
new HtmlWebpackPlugin({
template:"index.html"
}),
new uglifyJsPlugin()
]
上述全部完成之后运行命令webpack,然后查看dist下面打包的js文件,如果js是压缩状态,则以上全部操作视为成功。
npm install [email protected] --save-dev
修改webpack.config.js文件:
devServer:{
contentBase:'./dist',//为哪个文件提供本地服务,默认根目录
inline:true//页面实时刷新
}
//还有
//端口号port:默认8080
//historyApiFallback:在spa页面中,依赖HTML5的history模式
修改pageage.json文件:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",//原来运行webpack,现在运行 npm run build
"dev":"webpack-dev-server --open"//运行npm run dev可搭建本地服务,--open意为直接打开浏览器
},
上述全部完成之后运行命令npm run dev,若直接启动了浏览器打开该项目,则以上全部操作视为成功。
npm install webpack-merge --save-dev
根目录下新建build文件夹,然后新建build/base.config.js,build/dev.config.js,build/prod.config.js
base.config.js:公用js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin =require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'test.js',
// publicPath: 'dist/',//打包之后涉及url的路径自动转换
},
module: {
rules: [
{
test: /\.css$/,
//使用多个loader,是从右向左读
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}, {
test:'/\.js$/',
exclude:/(node_modules|bower_components)/,
use:{
loader:'babel-loader',
options:{
presets:['es2015']
}
}
},{
test:/\.vue$/,
use:['vue-loader']
},{
test:/\.(png|jpg|gif|jpeg)$/,
use:[{
loader:'url-loader',
options:{
limit:8192,
name:'img/[name][hash:8].[ext]'
}
}]
}
]
},
plugins:[
new webpack.BannerPlugin('最终版权归我所有'),
new HtmlWebpackPlugin({
template:"index.html"
}),
],
resolve: {
extensions: ['.js', '.css', '.vue'],//配置此项,引用文件可以省略后缀名
alias: {//别名
'vue$': 'vue/dist/vue.esm.js'
}
}
}
dev.config.js:开发环境
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');//引入base.config.js
module.exports =
webpackMerge(baseConfig, {//合并js
devServer: {
contentBase: './dist',
inline: true
}
})
prod.config.js:生产环境
const uglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
module.exports = webpackMerge(baseConfig, {
plugins: [
new uglifyJsPlugin()
]
})
修改package.json中的内容如下:
"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"
},
//修改build,和dev后边的意义为,执行npm run build/dev的时候,找到对应的js
上述全部完成之后运行命令npm run dev,若直接启动了浏览器打开该项目,
然后运行命令npm run build,项目打包到dist文件夹下面,打包的js文件被压缩,运行dist/index.html,项目显示正确,则视为上述操作全部成功。