webpack打包css和js学习笔记

参考原文:
https://www.cnblogs.com/liqiyuan/p/6246870.html

打包成功命令回显

PS E:\code\webpack_demo> webpack
Hash: cde7c8f8e444f0a3daa6
Version: webpack 4.42.0
Time: 541ms
Built at: 2020-03-04 15:42:37
    Asset      Size  Chunks             Chunk Names
bundle.js  4.89 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[2] ./main.js 112 bytes {0} [built]
[3] ./src/index.js 0 bytes {0} [built]
[4] ./src/test.js 0 bytes {0} [built]
[5] ./src/index.css 561 bytes {0} [built]
[6] ./node_modules/css-loader/dist/cjs.js!./src/index.css 282 bytes {0} [built]
[7] ./src/test.css 560 bytes {0} [built]
[8] ./node_modules/css-loader/dist/cjs.js!./src/test.css 232 bytes {0} [built]
    + 2 hidden modules

命令行笔记(已删除重复报错命令):

PS E:\code\webpack_demo> history
  Id CommandLine                                                         
  -- -----------                                                         
   1 npm init                                                           
   2 npm install webpack --save-dev                                     
   3 npm install jquery --save-dev
   4 npm install style-loader css-loader --save-dev
   5 npm install extract-text-webpack-plugin -save-dev
  11 npm install -g webpack --save-dev
  15 npm install -g webpack-cli --save-dev
  21 npm install extract-text-webpack-plugin@next
  28 webpack

贴一下各文件配置

目录结构

node_modules
src
|-index.css
|-index.js
|-test.css
|-test.js
main.js
package-lock.json
package.json
webpack.config.js

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.4.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "jquery": "^3.4.1",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
}

webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: './main.js',
  output: {
    path: '/dist',
    filename: 'bundle.js'
  },
  // mode: 'development',
  mode: 'production',

  plugins: [
    new ExtractTextPlugin('./style.css')
  ],
  module: {
    //加载器配置
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
      // { 
      // test: /\.(png|jpg)$/,
      // loader: 'url-loader?limit=8192'
      // }
    ]
  }
};

main.js

require('./src/index.js');
require('./src/test.js');
require('./src/index.css');
require('./src/test.css');

问题记录

问题1:
打包成功后 bundle.js 找不到
解决:
everything 搜一下,发现 /dist 生成的位置不在当前项目根目录,而是在磁盘根目录。

问题2:
ReferenceError: production is not defined
解决:
额,这个毫无技术含量,注意带引号~

问题3:
css打包报错

ERROR in ./src/index.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

解决:
webpack.config.json 中 module 配置,貌似不同版本不尽相同。
本文版本: Version: webpack 4.42.0
安装命令

21 npm install extract-text-webpack-plugin@next

配置内容

  module: {
    //加载器配置
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }

问题4:
webpack报错

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:

解决:
参考脚本中使用了 loader,本版本没这个玩意。解决方法同问题3

问题5:
webpack报错

(node:11920) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

额,这个啥原因忘记了……

问题6:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable 
defaults for each environment.

解决:
配置模式,生产或开发~

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!