阅读 286

webpack入门

webpack是前端模块化的打包工具,面试中的常考题,但是使用起来却不是很难,通过简单的配置便可实现功能,那webpack如何使用的呢?笔者也正处在学习中,若有不对还请指出,多多包涵。

webpack的安装

安装webpack必须先安装node环境。

查看自己的node版本

node -v
复制代码

全局安装webpack

npm install webpack -g
复制代码

局部安装webpack

--save-dev是开发时依赖,项目打包后不需要继续使用

webpack的配置

安装好了webpack之后,我们可以新建一个dist目录作为打包目录,下面建一个bundle.js文件用于存储打包代码

alt
之后我们便可在html文件中引入这个文件

<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

alt

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所有'),
  ]
复制代码

配置成功后我们便可在打包文件的头部看到

alt

那么如何将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

alt
然后我们就可以只用这个html文件引入bundle.js,外面的html文件只需要一个div模板便可

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"
复制代码

这样我们便可以在开发阶段运行我们的代码了。