webpack入门

工作区设置

IDE

Visual Studio Code

插件

配置.vscode/settings.json

{
  "editor.tabSize": 2,

  "prettier.printWidth": 160,
  "prettier.tabWidth": 2,
  "prettier.semi": false,
  "prettier.singleQuote": true,

  "[vue]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[stylus]": {
    "editor.formatOnSave": true
  },

  "stylusSupremacy.insertBraces": false,
  "stylusSupremacy.insertColons": false,
  "stylusSupremacy.insertSemicolons": false,

  "languageStylus.useSeparator": false,

  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 160,
      "tabWidth": 2,
      "semi": false,
      "singleQuote": true,
    }
  }
}

webpack项目配置和使用

安装依赖的方式

安装依赖的工具有2种npm和yarn(推荐使用)

依赖安装的位置有全局安装和项目安装：[例如安装webpack]

全局安装：npm install webpack -g or yarn global add webpack

项目安装（推荐）：

​ 开发依赖：npm install webpack -D or yarn add webpack --dev

​ 在生产时，所用到的依赖，不会加入到打包后的文件中。

​ 线上依赖：npm install webpack or yarn add webpack

​ 会加入到打包后的文件中去。

全局安装和项目安装`的区别

全局安装使用时，需要配置全局变量，然后直接webpack执行命令。
项目安装使用时：
./node_modules/webpack/bin/webpack.js or
在packge.json文件中配置scripts，执行scripts命令时，会直接去找当前根目录下的node_modules下的依赖。

起步

安装依赖：yarn add webpack webpack-cli --dev`

webpack：打包工具

webpack-cli：webpack的必须依赖包

在packge.json加入：

{
  "name": "webpack-test",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "scripts": {
+   "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  }
}

"build": "webpack"：是为了执行项目依赖webpack的时候，不需要使用./node_modules/webpack/bin/webpack.js这种方式执行项目，而可以使用：yarn webpackor npm run webpack

新建、配置webpack.config.js文件

新建webpack.config.js，配置如下内容：

const path = require('path')

module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].min.js'
  }
}

mode：提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

​ development：会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

​ 可以查看源码，但是体积大

​ production：会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin

​ 源码无法查看，但是体积小

entry: webpack的入口文件

output.path：输入的路径

output.filename：输出文件名

​ [name] 延续之前js的命名

​ [hash] 使用hash值；解决缓存问题

打包相关的快捷插件

html-webpack-plugin

安装：yarn add html-webpack-plugin --dev

添加html模板，并将动态的js文件添加到文件中，不需要手动添加js文件

clean-webpack-plugin

安装：yarn add clean-webpack-plugin

清除output.path目录下的所有文件

webpack.config.js中的配置入下：

  plugins: [
    new Webpack.ProgressPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      title: 'Output Management'
    })
  ]

想要HtmlWebpackPlugin插件的title在html中生效，需要在index.html的title中添加<%= htmlWebpackPlugin.options.title %>如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

在这里使用yarn build，即可以打包出对应的文件。

如果是开发时，如果有开发的服务，是最好的。

使用webpack-dev-server开启服务（devServer）

安装：yarn add webpack-dev-server

webpack-dev-server：webpack内置服务器；具体更多的webpack-dev-server配置项，查看官网

在webpack.config.js中配置以下内容：

  /**[webpackDev服务器]
   *  @contentBase            {服务器根目录}
   *  @inline                 {true=正常模式；false=iframe模式}
   *  @hotOnly                {true禁用自动刷新}
   *  @historyApiFallback     {true=404时，使用index.html替代}
   *  @compress               {使用压缩版本的js}
   *  @hot                    {使用热更新}
   */
  devServer: {
    contentBase: './dist',
    compress: true,
    inline: true,
    hotOnly: false,
    hot: false,
    historyApiFallback: true
  },

在packge.json的scripts中加入"serve": "webpack-dev-server --open"

使用yarn serve既可以开启webpack服务器

--open 自动打开浏览器

到目前为止，上线打包、开发的配置已经好了，那么这就好了吗？当然不是，如果是需要使用es6语法，当然是不支持的。

设置别名、自动解析缀名

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
    extensions: ['.js']
  },

resolve设定解析规则

​ resolve.alias：设置别名

​ resolve.extensions：当没有后缀名时，自动解析为.js文件后缀。

支持ES6语法和代码polyffil

安装：yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-syntax-dynamic-import --dev

babel-loader：webpack解析js文件的loader

@babel/preset-env：识别浏览器版本，对代码polyfill到某个版本

@babel/core：执行代码的polyfill

package.json的配置：

  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]

指定polyfill的最低版本.

webpack.config.js配置：

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-env'],
          /**默认情况下，此插件将使用Babel的objectSpread帮助程序生成符合规范的代码 */
          plugins: [require('@babel/plugin-proposal-object-rest-spread')]
        }
      }
    ]
  },

@babel/plugin-proposal-object-rest-spread：对象的解构

对.js文件进行解析，并使用@babel/preset-env预置解析，使用@babel/plugin-transform-object-rest-spread插件。

引入reset.css重置样式

yarn add @babel/plugin-syntax-dynamic-import --dev

@babel/plugin-syntax-dynamic-import：支持import()语法

在src/main.js中加入：

import App from './pages/home/home.js'

import('@/asset/css/reset.css')

App()

重置样式文件reset.css：

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
html{color:#000;overflow-y:scroll;overflow:-moz-scrollbars-vertical}
body,button,input,select,textarea{font-size:12px;font-family:arial,'Hiragino Sans GB','Microsoft Yahei','微软雅黑','宋体',\5b8b\4f53,Tahoma,Arial,Helvetica,STHeiti}
h1,h2,h3,h4,h5,h6{font-size:100%}
em{font-style:normal}
small{font-size:12px}
ul,ol{list-style:none}
a{text-decoration:none}
a:hover{text-decoration:underline}
legend{color:#000}
fieldset,img{border:0}
button,input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
img{-ms-interpolation-mode:bicubic}
textarea{resize:vertical}
.left{float:left}
.right{float:right}
.overflow{overflow:hidden}
.hide{display:none}
.block{display:block}
.inline{display:inline}
.error{color:#F00;font-size:12px}
label,button{cursor:pointer}
.clearfix:after{content:'\20';display:block;height:0;clear:both}
.clearfix{zoom:1}.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}
.wordwrap{word-break:break-all;word-wrap:break-word}
pre.wordwrap{white-space:pre-wrap}
body,form{position:relative}
td{text-align:left}
img{border:0}

发现还是报错，因为没有解析.css文件。

yarn add style-loader css-loader

style-loader：解析css

css-loader：将style样式，插入行内样式，webpack.config.js文件配置如下：

      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },

执行yarn serve，就可以看到重置样式了。

使用stylus书写样式

yarn add stylus stylus-loader --dev

安装好依赖，在webpack.config.js中的module.rules配置如下：

      {
        test: /\.styl$/,
        use: [
          'style-loader', 
          {
            loader: 'css-loader'
          },
          'stylus-loader'
        ]
      },

然后在就可以使用stylus文件了。

热更新

在webpack.config.js中的devServer、plugins中添加：

  devServer: {
    contentBase: './dist',
    compress: true,
    hotOnly: false,
    hot: true,					//新加
    historyApiFallback: true
  },

Webpack需要提前引入：

const Webpack = require('webpack')

  plugins: [
    new Webpack.ProgressPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      title: 'Output Management'
    }),
    new Webpack.NamedModulesPlugin(),  //新加
    new Webpack.HotModuleReplacementPlugin()  //新加
  ]

在入口文件main.js中添加：

import App from './pages/home/home.js'

import('@/asset/css/reset.css')

import('./pages/home/index.styl')

//新加
if(module.hot){
  module.hot.accept(() => {
    App()
  })
}

App()

再次执行，即可实现热更新。

解析.vue文件

yarn add vue-loader vue-template-compiler --dev

具体详细文档见vueLoader官网

在webpack.config.js中配置：

  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },

  const VueLoaderPlugin = require('vue-loader/lib/plugin')
  
  ...
  plugins: [
    new VueLoaderPlugin()
  ]

main.js中加入:

import Vue from 'vue'
import App from '@/pages/App.vue'

import('@/asset/css/reset.css')

if(module.hot){
  module.hot.accept(() => {
    new Vue({
      render: function (h) {
        return h(App)
      }
    }).$mount('#app')
  })
}

new Vue({
  render: function (h) {
    return h(App)
  }
}).$mount('#app')

因为main.js不支持template模板解析语法，所以使用的函数渲染。

新增App.vue

<template lang="html">
  <div class="home">
    {{text}}
  </div>
</template>
<style lang="stylus" scoped>
.home
  color red
  font-size 18px
</style>
<script>
export default ({
  data () {
    return {
      text: 'Hello World'
    }
  },
})
</script>

这时候可以运行成功了嘛？不可能.....还要对 .styl文件进行单独处理：

yarn add stylus-loader --dev

之前已经装过stylus，所以这里就没有装。

配置webpack.config.js：

module: {
    rules: [
    	// 修改之之前匹配.styl规则
    	{
            test: /\.styl(us)?$/,
            use: [
              'vue-style-loader', 
              'css-loader',
              'stylus-loader'
        ]
      },
    ]
}

然后就可以在.vue文件中使用stylus了

这里有一个坑，test匹配规则一定要加：(us)?这句，否则会报错。

使用pug文件开发

yarn add pug pug-plain-loader --dev

配置匹配规则：

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      },
   ]
 }

就可以使用pug格式

posted @ 2019-03-20 17:36  DaivdAndLemon  阅读(398)  评论(0)  编辑  收藏  举报