构建工具-webpack

在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

1.安装webpack分为默认安装最新版本以及安装固定版本

npm install --save-dev webpack //默认安装最新版本
npm install --save-dev webpack@<version> //安装固定版本@<版本号>

2.安装package.json文件

npm init -y //安装package.json文件

配置：我们还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",

 
       "scripts": { 
  
     "dev": 
   "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 
  
   "start": 
   "npm run dev", //运行命令配置，'npm run dev' == 'npm run start' 
  
   "build": 
   "node build/build.js" //运行根目录下build文件加下的build.js文件进行构建 
  
    },

"keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9" }, "dependencies": {} }

3.管理资源

新建 webpack.config.js 文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  entry: './src/index.js', //配置文件入口
  output: {
    filename: 'bundle.js', //配置输出文件名称
    path: path.resolve(__dirname, 'dist') //配置文件路径
  },

  //安装插件
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
    title: 'Output Management'
  })],
  module:{
    rules:[
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};

猜你喜欢