首先配置webpack的基本配置，包括entry( 入口)、output（出口）：
（创建webpack.config.js文件放置所有的webpack的配置）
接下来是配置命令：
module.exports={
entry:"",
output:{
path:"",(写绝对路径，打包后的输出文件，一般通过node的path以及path.resolve的拼接函数，进行动态获取)
filename:""
}
}
然后提到的是如何将npm run XXX命令与webpack命令形成映射？
在package.json文件中的script下对应添加
"scripts":{
“build”:"webpack",
}
类似的代码就行了
下面是webpack如何对css文件进行处理？
（webpack的扩展处理都是通过安装对应的loader进行的）
处理css需要的loader为：css-loader、style-loader
利用npm进行下载上述loader
安装完，便进行配置，处理css需要的webpack配置为：
在module下添加相应的rules
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]
(从右向左依次编译，所以顺序可不能乱放) } ] }
所有你所需要的loader以及配置都可以在这里找到：https://www.webpackjs.com/loaders/css-loader/
接下来是对less文件的处理
处理less需要的loader为：less-loader、less
配置：略
接下来是对图片文件的处理
处理图片文件需要的loader为：url-loader、file-loader
当文件的大小小于默认配置option中的8196：=8kb时，图片文件会被url-loader编译成为base64存储，大于默认大小limit，便通过file-loader处理，不会编译成为base64存储，而是直接通过hash算法更改文件名，存储到出口文件。
配置：略
接下来是对es6文件的处理
处理less需要的loader为：babel-loader，babel-core、babel-preset-es2015
配置：
{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['es2015'] } } }
接下来是对vue文件的处理
需要在webpack中集成vue.js
利用npm安装npm i vue --save
vue在构建发布版本的时候，发布两个版本
1.runtime-only 代码中不可以有任何Template
2.runtime-compiler 代码中可以有Template
可以在webpack配置文件中，配置成为版本runtime-compiler
resolve:{ alias:{ "vue$":"vue/dist/vue.esm.js" } }
webpack.config.js中处理各种上述文件所有的配置为：
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ 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: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
},
resolve:{
alias:{
"vue$":"vue/dist/vue.esm.js"
}
}
}
package.json中的所有的依赖：
{ "name": "fhg", "version": "1.0.0", "description": "need not description", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "css-loader": "^1.0.1", "less": "^3.9.0", "less-loader": "^5.0.0", "style-loader": "^0.23.1", "url-loader": "^2.1.0", "vue-loader": "^13.0.0", "vue-template-compiler": "^2.6.10", "webpack": "^3.6.0" }, "dependencies": { "vue": "^2.6.10" } }
大家可以进群交流学习，老师讲的十分仔细！
vue学习链接
