从0开始简单配置webpack

时间 2020-09-19

标签开始简单配置 webpack 繁體版

原文原文链接

配置webpack的环境

全局安装
npm install webpack webpack-cli -g
本地安装 到具体项目文件
mkdir my-project
cd my-project
npm init -y  //建立package.json文件
npm install webpack webpack-cli -D  //安装webpack和webpack脚手架到项目

配置文件

webpack默认配置文件：webpack.config.js
修改配置文件名字： webpack --config //也能够指定的配置文件名字如(webpack.config.dev.js)~~~~css

//配置webpack.config.js 文件
const path = require('path') 
module.exports = {

  // 打包入口  支持字符串，对象, 数组
  //默认值： ./src/index.js  须要注意的是webpack4.0之后将如何   文件设置为index.js
  entry: './src/main.jsx',
  // 打包的输出
  // 默认值：./dist/main.js
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')  //打包好的静态目录文件
  },

  // webpack打包模式
  // 取值：生产模式production  开发模式development  none
  // 默认值 production
  mode: 'none',
  // 配置loaders的
 
 module: {
    // 一个loader的配置项，就是一个对象，放在rules的数组中
    rules: [
      // 处理js
      {
        //说明须要loader处理的文件匹配规则
        test: /\.(js|jsx)$/,
        //说明使用的loader名字 同时也须要安装babel-loader依赖处理es6以上语法 npm install babel-loader @babel/core @babel/preset-env -D
    因后面会用到jsx文件和react,再安装处理jsx语法的依赖包:npm install @babel/preset-react -D npm install react react-dom -S
        loader: 'babel-loader'
      },
      //处理css文件  安装处理css文件依赖 npm install style-loader css-loader -D
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
        //注意依赖顺序是从右边到左
      },
      // 处理sass  安装处理sass语法的依赖包 npm install style-loader css-loader sass-loader node-sass -D
      {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      },
      // 处理文件 安装依赖处理图片，字体文件 npm install url-loader file-loader -D
      {
        test: /\.(png|jpeg|gif|jpg|svg|ttf)$/,
        // loader: 'file-loader'
        loader: 'url-loader',
        options: {
          limit: 5
        }
      }

    ]
    },
    }
基本的配置依赖以完成,而后到项目文件夹里面继续 my-project,我这边是配置react文件和webpack一块儿使用 在项目内新建一个src文件夹 里面有 App.jsx main.jsx  style.scss

###  App.jsx
import React, {Component} from 'react'
import './style.scss'

export default class App extends Component{
  render(){
    return (
      <div>
        <h1>哟哟我心</h1>
      </div>
    )
  }
}
### main.jsx
import React from 'react'
import ReactDOM from 'react-dom'

import App from './App.jsx'

ReactDOM.render(
  <App/>,
  document.querySelector('#root') //挂载到index.html文件下
)

style.scss

body{
  background-color: yellow;
  background-image: url(./logo.png);
  h1{
    color: red;
  }
}

index.html文件打包后输出渲染~~~~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="root"></div>

  <script src="./dist/bundle.js"></script>
  
</body>
</html>

注意因为项目使用了react和Babel,第一步就是配置.babelrc这个文件,放在项目根目录下,该文件用来设置转码规则和插件,具体设置以下

.babelrc文件

presets字段设定转码规则，官方提供如下的规则集,文章的上面已经分别安装了相应的依赖包
babel-preset-envhtml

{
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
   
  ],
   //后期还能够预设一些插件
  
"plugins": []

}

启动项目执行webpack指令,项目会在根目录下面打包生成dist文件夹,而且会生成经过webpack打包编译的文件 bundle.js
而后浏览器打开index.html 就OK了node