一、我们的项目不仅有js文件，还有很多其它依赖，例如css，less等，那么如何在打包的时候将css文件一起打包呢？
这里就需要一个合适对应的loader，否则就会报错，以下安装都是开发时依赖：
ERROR in ./src/css/normal.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See htt
ps://webpack.js.org/concepts#loaders
> body {
| background-color: red;
| }
@ ./src/main.js 10:0-27
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! meetwebpack@1.0.0 dev: `webpack --mode=development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the meetwebpack@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! D:\nodejs\node_cache\_logs\2020-04-26T01_55_34_099Z-debug.log
1、安装css-loader：
npm install --save-dev css-loader
2、配置webpack.config.js文件
module.exports = {
//entry指定入口文件,可以添加多个入口，然后生成多个出口
entry:{
home:path.resolve(__dirname,'./src/main.js')
},
//output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
output:{
//node语法，__dirname获取当前文件的路径
path:path.resolve(__dirname,'dist'),
//这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
filename:'[name].js'
},
module:{
rules: [
{
test: /\.css$/,
//use数组里也可以写成对象的形成[{ loader: "style-loader" },{ loader: "css-loader" }]
//webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
3、安装style-loader
如果只安装了css-loader，css文件是不会渲染到html文件里，它只负责css文件的解析加载，所以还需要一个style-loader
npm install style-loader --save-dev
4、执行打包命令
npm run dev就可以了
二、上面说了除了css，还有less，less是css的扩展，使样式代码更简洁
1、安装less-loader
npm install --save-dev less-loader less
2、配置webpack.config.js文件
module:{
rules: [
{ //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
test: /\.css$/,
//webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
}, {
loader: "css-loader" // translates CSS into CommonJS，解析css
}, {
loader: "less-loader" // compiles Less to CSS，加载less编译成css
}]
}
]
}
}
3、执行打包命令
npm run dev
三、url-loader：像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
1、安装
npm install --save-dev url-loader
2、配置webpack.config.js文件
const path = require('path')
module.exports = {
//entry指定入口文件,可以添加多个入口，然后生成多个出口
entry:{
home:path.resolve(__dirname,'./src/main.js')
},
//output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
output:{
//node语法，__dirname获取当前文件的路径
path:path.resolve(__dirname,'dist'),
//这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
filename:'[name].js'
},
module:{
rules: [
{ //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
test: /\.css$/,
//webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
}, {
loader: "css-loader" // translates CSS into CommonJS，解析css
}, {
loader: "less-loader" // compiles Less to CSS，加载less编译成css
}]
},
{
test: /\.(png|jpg|gif)$/, //图片过滤
use: [
{
loader: 'url-loader',
options: {
//当加载的图片小于limit时候，会将图片编译成base64字符串形式
limit: 8192
}
}
]
}
]
}
}
3、file-loader
当上传图片小于limit，就会用url-loader，而大于的时候就会自动用file-loader。file-loader不用配置，直接安装即可：
但是打包后，图片会生成一个哈希值命名的图片在dist目录下，而html读取的路径与其不一致，所以要在output里加一个publicpath=‘dist/
output:{
//node语法，__dirname获取当前文件的路径
path:path.resolve(__dirname,'dist'),
//这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
filename:'[name].js',
//当用file-loader加载时，由于打包后图片在dist里，html读取的路径不一样，所以加一个publicpath
publicPath:'dist/'
}
publicPath
四、模块化思想，webpack配置VUE
1、安装VUE
npm install vue --save
2、引用vue：main.js
//src目录里面放源码
//dist目录里面放打包好的东西，供发布用
import {add,mul,sub} from "./js/mathUtils";
console.log(add(10, 20));
console.log(mul(2, 2));
console.log(sub(3, 2));
//1..依赖css文件，这里用commonjs写法，不用在前面加变量，因为只是单纯依赖css
require('./css/normal.css')
//2..依赖less文件，less是css的扩展
require('./css/special.less')
document.writeln('<h2>你好，我是less样式~</h2>')
//3..使用vue进行开发，要先安装vue依赖：npm install vue --save
//这么引用打包，控制太报错，vue两类版本：runtime-only和runtime-compiler
//runtime-only：代码中，不可以有任何的template，会把vue实例div当作template
//runtime-compiler：代码中，可以有template，因为有compiler用于编译
import Vue from 'vue'
const app = new Vue({
el:"#app",
data:{
message:"hello webpack-vue"
}
})
注意：这种方式直接打包，控制台会报如下错误：
vue报错
3、修改VUE编译版本
vue两类版本：
runtime-only：代码中，不可以有任何的template，会把vue实例div当作template
runtime-compiler：代码中，可以有template，因为有compiler用于编译
webpack.config.js文件中添加resolve字段：
const path = require('path')
module.exports = {
//entry指定入口文件,可以添加多个入口，然后生成多个出口
entry:{
home:path.resolve(__dirname,'./src/main.js')
},
//output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
output:{
//node语法，__dirname获取当前文件的路径
path:path.resolve(__dirname,'dist'),
//这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
filename:'[name].js',
//当用file-loader加载时，由于打包后图片在dist里，html读取的路径不一样，所以加一个publicpath
publicPath:'dist/'
},
module:{
rules: [
{ //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
test: /\.css$/,
//webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
}, {
loader: "css-loader" // translates CSS into CommonJS，解析css
}, {
loader: "less-loader" // compiles Less to CSS，加载less编译成css
}]
},
{
test: /\.(png|jpg|gif)$/, //图片过滤
use: [
{
loader: 'url-loader',
options: {
//当加载的图片小于limit时候，会将图片编译成base64字符串形式
//当加载的图片大于limit时候，要用file-loader加载,但是要更改路径
limit: 8192,
//这里的【name】是指打包之前图片的名字,hash为哈希值，ext为扩展名，都为变量，固定写法
name:'img/[name].[hash:8].[ext]'
}
}
]
}
]
},
//添加resolve字段，指定vue编译版本为runtime-compiler
resolve:{
//alias别名
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
五、vue-loader使用
1、安装vue-loader
cnpm install vue-loader vue-template-compiler --save-dev
2、配置webpack.config.js
由于vue-loader14以后就需要插件支撑，所以要在webpack.config.js文件里导入插件
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
//entry指定入口文件,可以添加多个入口，然后生成多个出口
entry:{
home:path.resolve(__dirname,'./src/main.js')
},
//output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
output:{
//node语法，__dirname获取当前文件的路径
path:path.resolve(__dirname,'dist'),
//这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
filename:'[name].js',
//当用file-loader加载时，由于打包后图片在dist里，html读取的路径不一样，所以加一个publicpath
publicPath:'dist/'
},
module:{
rules: [
{ //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
test: /\.css$/,
//webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
}, {
loader: "css-loader" // translates CSS into CommonJS，解析css
}, {
loader: "less-loader" // compiles Less to CSS，加载less编译成css
}]
},
{
test: /\.(png|jpg|gif)$/, //图片过滤
use: [
{
loader: 'url-loader',
options: {
//当加载的图片小于limit时候，会将图片编译成base64字符串形式
//当加载的图片大于limit时候，要用file-loader加载,但是要更改路径
limit: 8192,
//这里的【name】是指打包之前图片的名字,hash为哈希值，ext为扩展名，都为变量，固定写法
name:'img/[name].[hash:8].[ext]'
}
}
]
},
{ //大概从14开始，就需要插件来支持使用vue-loader，如果不安装，就改下package.json里的vue-loader版本，然后npm install
test: /\.vue$/,
use: ['vue-loader']
}
]
},
//此插件就是支撑vue-loader使用的
plugins: [
new VueLoaderPlugin()
],
//添加resolve字段，指定vue编译版本为runtime-compiler
resolve:{
//alias别名
alias:{
'vue$':'vue/dist/vue.esm.js'
},
//指定哪些文件的后缀名省略
extensions: ['.js','.css','.vue']
}
}
3、抽离组件和js
main.js
import {add,mul,sub} from "./js/mathUtils";
console.log(add(10, 20));
console.log(mul(2, 2));
console.log(sub(3, 2));
//1..依赖css文件，这里用commonjs写法，不用在前面加变量，因为只是单纯依赖css
require('./css/normal.css');
//2..依赖less文件，less是css的扩展
require('./css/special.less');
document.writeln('<h2>你好，我是less样式~</h2>');
//3..使用vue进行开发，要先安装vue依赖：npm install vue --save
//这么引用打包，控制太报错，vue两类版本：runtime-only和runtime-compiler
//runtime-only：代码中，不可以有任何的template，会把vue实例div当作template
//runtime-compiler：代码中，可以有template，因为有compiler用于编译
import Vue from 'vue'
import App from './vue/App.vue'
new Vue({
el:"#app",
template:'<App/>',
components:{
App
}
})
App.vue
<template>
<div>
<h2 class="test">{{message}}</h2>
<button @click="btnClick">点击我</button>
<!-- 子组件cpn的调用-->
<Cpn/>
</div>
</template>
<script>
import Cpn from './Cpn'
export default {
name: "App",
//注册该子组件的子组件
components:{
Cpn
},
data(){
return {
message:'Hello vue实例中的template'
}
},
methods:{
btnClick() {
console.log('我是vue实例子组件的button')
}
}
}
</script>
<style scoped>
.test{
color: #D94A38;
}
</style>
项目结构：
项目结构
六、插件
1、html-webpack-plugin插件，将html文件和dist一起打包
a）安装：cnpm install html-webpack-plugin --save-dev
b）配置webpack.config.js文件：
首先导入插件：const HtmlWebpackPlugin = require('html-webpack-plugin');
然后配置module.export里的plugins：new HtmlWebpackPlugin()
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//entry指定入口文件,可以添加多个入口，然后生成多个出口
entry:{
home:path.resolve(__dirname,'./src/main.js')
},
//output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
output:{
//node语法，__dirname获取当前文件的路径
path:path.resolve(__dirname,'dist'),
//这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
filename:'[name].js'
//当用file-loader加载时，由于打包后图片在dist里，html读取的路径不一样，所以加一个publicpath
//publicPath:'dist/'
},
module:{
rules: [
{ //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
test: /\.css$/,
//webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
}, {
loader: "css-loader" // translates CSS into CommonJS，解析css
}, {
loader: "less-loader" // compiles Less to CSS，加载less编译成css
}]
},
{
test: /\.(png|jpg|gif)$/, //图片过滤
use: [
{
loader: 'url-loader',
options: {
//当加载的图片小于limit时候，会将图片编译成base64字符串形式
//当加载的图片大于limit时候，要用file-loader加载,但是要更改路径
limit: 8192,
//这里的【name】是指打包之前图片的名字,hash为哈希值，ext为扩展名，都为变量，固定写法
name:'img/[name].[hash:8].[ext]'
}
}
]
},
{ //大概从14开始，就需要插件来支持使用vue-loader，如果不安装，就改下package.json里的vue-loader版本，然后npm install
test: /\.vue$/,
use: ['vue-loader']
}
]
},
//此插件就是支撑vue-loader使用的
plugins: [
new VueLoaderPlugin(),
new webpack.BannerPlugin('最终版权归小二哥所有'),
//根据index.html生成dist里的index.html
new HtmlWebpackPlugin({
template:`index.html`
})
],
//添加resolve字段，指定vue编译版本为runtime-compiler
resolve:{
//alias别名
alias:{
'vue$':'vue/dist/vue.esm.js'
},
//指定哪些文件的后缀名省略
extensions: ['.js','.css','.vue']
}
}
2、js压缩插件：uglifyjs-webpack-plugin
a）安装：cnpm install uglifyjs-webpack-plugin --save-dev
b）导入和配置webpack.config.js文件:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
//entry指定入口文件,可以添加多个入口，然后生成多个出口
entry:{
home:path.resolve(__dirname,'./src/main.js')
},
//output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
output:{
//node语法，__dirname获取当前文件的路径
path:path.resolve(__dirname,'dist'),
//这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
filename:'[name].js'
//当用file-loader加载时，由于打包后图片在dist里，html读取的路径不一样，所以加一个publicpath
// publicPath:'dist/'
},
module:{
rules: [
{ //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
test: /\.css$/,
//webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
}, {
loader: "css-loader" // translates CSS into CommonJS，解析css
}, {
loader: "less-loader" // compiles Less to CSS，加载less编译成css
}]
},
{
test: /\.(png|jpg|gif)$/, //图片过滤
use: [
{
loader: 'url-loader',
options: {
//当加载的图片小于limit时候，会将图片编译成base64字符串形式
//当加载的图片大于limit时候，要用file-loader加载,但是要更改路径
limit: 8192,
//这里的【name】是指打包之前图片的名字,hash为哈希值，ext为扩展名，都为变量，固定写法
name:'img/[name].[hash:8].[ext]'
}
}
]
},
{ //大概从14开始，就需要插件来支持使用vue-loader，如果不安装，就改下package.json里的vue-loader版本，然后npm install
test: /\.vue$/,
use: ['vue-loader']
}
]
},
//此插件就是支撑vue-loader使用的
plugins: [
new VueLoaderPlugin(),
new webpack.BannerPlugin('最终版权归小二哥所有'),
//根据index.html生成dist里的index.html
new HtmlWebpackPlugin({
template:`index.html`
}),
new UglifyjsWebpackPlugin()
],
//添加resolve字段，指定vue编译版本为runtime-compiler
resolve:{
//alias别名
alias:{
'vue$':'vue/dist/vue.esm.js'
},
//指定哪些文件的后缀名省略
extensions: ['.js','.css','.vue']
}
}
c）这时候打包后的home.js是这样的：
压缩后的home.js
