webpack是前端模块化的打包工具，面试中的常考题，但是使用起来却不是很难，通过简单的配置便可实现功能，那webpack如何使用的呢？笔者也正处在学习中，若有不对还请指出，多多包涵。
webpack的安装
安装webpack必须先安装node环境。
查看自己的node版本
node -v
全局安装webpack
npm install webpack -g
局部安装webpack
--save-dev是开发时依赖，项目打包后不需要继续使用
webpack的配置
安装好了webpack之后，我们可以新建一个dist目录作为打包目录，下面建一个bundle.js文件用于存储打包代码
<script src="dist/bundle.js"></script>
之后我们可以在package.json中配置一下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
这样我们便可通过这个命令来使用webpack
npm run build
而后我们来到webpack.config.js中配置一下便可成功使用webpack
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: './src/main.js',// 入口文件
output: {
path: path.resolve(__dirname, 'dist'),// 所有输出文件的路劲
filename: 'bundle.js', // 打包的文件名
publicPath: '/dist' // 打包文件中关于url会自动加上/dist
}
webpack中css和less文件的处理
我们需要先通过npm安装一下
npm install --save-dev less-loader less
npm install --save-dev css-loader
而后我们需要对webpack.config.js进行配置
module: {
rules: [
{
test: /\.css$/,
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
// name: 'img/[name].[hash:8].[ext]'//改变图片打包路劲和名字
}]
}
}
其中的test的//是正则模板，\是对.进行解析，而.css和.less$是文件的后缀名
安装和配置之后便可写入这两个文件
body { background-color: red;}
@fontSize: 50px;@fontColor: orange;body { font-size: @fontSize; color: @fontColor;}
然后在main.js进行引入
require('./css/normal.css')
require('./css/special.less')document.writeln('<h2>你好啊</h2>')
打包之后便可在浏览器中查看html文件的变化
webpack中图片的处理
安装
npm install --save-dev url-loader
同样我们需要引入图片
import img from './image.png'
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192，
name: 'img/[name].[hash:8].[ext]'//改变图片打包路劲和名字
}
}
]
}
]
}
}
如果图片大小小于limit时，会将图片编译成base64字符串形式
这里要注意图片的大小可以通过limit改变，代码中的8192就是8kb，如果图片大小大于limit，我们需要安装file-loader来加载大于limit的图片
如果大小小于limit，我们打包出来的图片会生成在dist目录下，但是名称是32位hash值，如果我们希望名称可以短些，可以通过代码来改成8位hash值，并且可以指定图片打包的文件夹位置
name: 'img/[name].[hash:8].[ext]'
webpack中代码es6转成es5的babel
如果我们希望我们打包出来的代码是es5语法，我们可以通过安装babel来转译
安装
npm i --save-dev babel-loader@7 babel-core babel-preset-es2015
配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
之后我们便可发现bundle.js中的代码const变成了var
webpack使用vue的配置
{
test: /\.vue$/,
use: ['vue-loader']
}
但是就写这些是不够的，因为vue有两个不同的版本runtime-only和runtime-compiler,而我们使用的是前者，这个版本是不能使用template模板的，而div会自动被当成template模板，所以我们需要更换版本
resolve: {
extensions: ['.js', '.css', '.vue'],// 引入时省略后缀
alias: {// 模块别名列表
'vue$': 'vue/dist/vue.esm.js'
}
}
当然我们在引入vue文件时不加后缀会报错，所以我们可以添加一个extensions以便省略后缀
webpack中plungs的使用
plugins是一个webpack的附加插件，而其中的一个功能就是可以添加一些版权声明
配置
plugins: [ // 附加插件
new webpack.BannerPlugin('最终版权归aaa所有'),
]
配置成功后我们便可在打包文件的头部看到
那么如何将html文件打包到dist文件夹下呢？
我们同样需要安装一个东西
npm i html-webpack-plugin --save-dev
之后在配置文件引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [ // 附加插件
new webpack.BannerPlugin('最终版权归aaa所有'),
new HtmlWebpackPlugin({
template: 'index.html'
})
]
之后便可看到dist文件下多了一个index.html
webpack-dev-server搭建本地服务器
在开发阶段，其实我们没有必要每次都打包文件查看效果，我们可以搭建一个本地服务器以便开发使用
安装
npm i webpack-dev-server@2.9.3 --save-dev
配置
devServer: {
contentBase: './dist',
inline: true
}
配置成功后，我们可以通过这个命令运行服务器
./node_modules/.bin/webpack-dev-server
当然，我们也可以选择配置一下package.json增加一个dev然后运行简单的命令就可以启动服务器
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
}
运行服务器的命令
npm run dev
如果大家觉得输入命令后还要手动输入本地ip地址很麻烦，我们可以在dev后面加一个--open来使得命令输入后可以自动打开网页
"dev": "webpack-dev-server --open"
这样我们便可以在开发阶段运行我们的代码了。
