说明

webpack4 demo，加入了常用loader，eslint，babel，用vue做了个例子
css文件独立的插件已经换为mini-css-extract-plugin，使用更简单，但配置项过少，还有待进一步优化
根据整个研究过程写了几个小demo，在demo目录

install

npm i

常用命令

启动服务 配置webpack/webpack.dev.js

npm start

修复eslint eslint配置在.eslintrc.js文件中

npm run lint-fix

build 配置webpack/webpack.prod.js

npm run build

附加配置

babel
eslint
postcss
stylus
vue
vue-router

├──  demo                          demo目录，每个文件夹中都有步骤的说明
│     ├──  step1                   从头开始
│     ├──  step2                   附件的引入（Asset Management）
│     ├──  step3                   打包输出（Output Management）
│     ├──  step4                   开发（Development）
│     └──  step5                   完成webpack配置
│
├──  src                           vue目录
│     ├──  assets                  图片，样式等
│     ├──  components              组件
│     ├──  view                    页面
│     ├──  app.vue                 底层模版
│     ├──  index.js                开发入口
│     └──  routes.js               路由总入口
│
├──  webpack                       webpack配置信息
│     ├──  webpack.common.js       公共配置
│     ├──  webpack.dev.js          开发模式配置
│     └──  webpack.prod.js         生产模式配置
│
├──  .babelrc                      babel配置
├──  .eslintrc.js                  eslint配置
├──  .gitignore                    git忽略文件
├──  favicon.ico                   网站图标
├──  index.template.ejs            页面模版
├──  package-lock.json             依赖包版本锁定文件
├──  package.json                  基础信息
├──  postcss.config.js             postcss配置
└──  README.md                     看看

结合vue开发

npm i vue vue-router
npm i vue-loader vue-style-loader vue-template-compiler -D
npm i stylus stylus-loader -D

需要为.vue和.styl文件增加loader设置 vue推荐用单文件模式开发，就是.vue文件中包含了script和css等开发模式，优先于postcss-loader加载的规则如stylus-loader需要设置sourceMap

webpack.dev.js

+  {
+    test: /\.styl$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      'postcss-loader',
+      { loader: 'stylus-loader', options: { sourceMap: false } },
+    ]
+  },
+  {
+    test: /\.vue$/,
+    loader: 'vue-loader',
+    options: {
+      loaders: {
+        js: ['babel-loader', 'eslint-loader'],
+        css: [
+          'vue-style-loader',
+          'css-loader',
+          'postcss-loader',
+        ],
+        stylus: [
+          'vue-style-loader',
+          'css-loader',
+          'postcss-loader',
+          { loader: 'stylus-loader', options: { sourceMap: false } },
+        ],
+      },
+    },
+  },

生产环境需要抽离css和stylus webpack.prod.js

+  {
+    test: /\.styl$/,
+    use: [
+      MiniCssExtractPlugin.loader,
+      'css-loader',
+      'postcss-loader',
+      'stylus-loader'
+    ],
+  },
+  {
+    test: /\.vue$/,
+    loader: 'vue-loader',
+    options: {
+      loaders: {
+        js: [
+          'babel-loader',
+          'eslint-loader'
+        ],
+        css: [
+          'vue-style-loader',
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader'
+        ],
+        stylus: [
+          'vue-style-loader',
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
+          'stylus-loader'
+        ],
+      },
+    },
+  },

增加eslint插件

npm i eslint-plugin-vue -D

更新eslint规则 .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
    },
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  // add your custom rules here
  rules: {
  },
}

增加babel插件

npm i babel-preset-stage-2 -D

更新babel配置 .babelrc

{
  "presets": ["env", "stage-2"]
}

yiqianglin/webpack4Demo

说明

install

常用命令

附加配置

目录

结合vue开发