webpack-使用篇

1.新建项目后，安装webpack

npm install webpack -D // 开发环境依赖
npm install webpack -g // 全局安装

安装webpack-cli

npm i webpack-cli -g // 全局安装webpack-cli

不止需要安装webpack,还需要安装webpack-cli, 因为webpack4后加了更多功能，所以需要加入webpack-cli依赖。

// 对于基础内容打包，这边我本来是用了dva,打包提示报错，报错内容如下（应该是虽然引入了webpack,但是没有使用webpack loader 所以无法解析），然后我把入口文件写成一个js函数进行导出，可以成功打包

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 ./src/index.js -o dist/index.js

webpack ./src/index.js -o dist/index.js --mode development  (开启开发模式， mode:development开发模式 production生产模式

 

// 解析一些loader

npm install less less-loader --save-dev //less解析成css

 在webpack.config.js中进行配置

module: {
  rules: [
    {
      test: /\.less$/i,
      use: [
        // compiles Less to CSS
        'style-loader',
        'css-loader',
        'less-loader',
      ],
    },
  ]
}

上述添加了好几个loader所以都需要进行安装

npm install css-loader style-loader less-loader less --save-dev

 

安装babel-loader, 将babel和webpack转译成javascript文件

npm install -D babel-loader @babel/core @babel/preset-env webpack // 安装命令

{
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/, // 除了这部分内容
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    } // 配置内容