• 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','微软雅黑','宋体',5b8b4f53,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格式
  • 相关阅读:
    (十六)分页
    （十五）条件查询
    (十四)hibernate逆向工程
    （十三）信息发布管理
    (十二)系统权限
    (十一)角色管理
    （十）系统异常处理
    （九）表单校验
    POI操作Excel
    （八）头像上传
  • 原文地址：https://www.cnblogs.com/wenwenwei/p/10566373.html
Copyright © 2020-2023  润新知