前端模块化 webpack 第二章

一、通过webpack搭建工程项目

1. 初始化一个package.json文件

npm init

2. 安装webpack 相关依赖包

npm install webpack webpack-cli -D

3. 在项目根目录下创建 webpack.config.js文件，在webpack.config.js文件中可以配置webpack相关的配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlplugin = new HtmlWebpackPlugin({ // 生产html 预览页面
    template: './src/index.html',
    filename: 'index.html'
})
// 配置vue
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    // 编译模式
    mode: 'development', // development production
    entry: path.join(__dirname, './src/index.js'), // 入口文件
    output: {
        path: path.join(__dirname, './dist'), // 输出文件存放路径
        filename: 'bundle.js' // 输出文件名称
    },
    plugins: [htmlplugin, new VueLoaderPlugin()],
    module: {
        // loader 协助webpack打包非js模块
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
            { test: /\.jpg|png|git|bmp|ttf|eot|svg|woff|woff2$/, use: ['url-loader?limit=10000000']}, // 处理图片 转base64
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    }
}

4. 在package.json文件中配置webpack相关的命令

{
  "name": "webpack-code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 9100",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.1",
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/runtime": "^7.12.1",
    "autoprefixer": "^10.0.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.0",
    "file-loader": "^6.1.1",
    "html-webpack-plugin": "^4.5.0",
    "less": "^3.12.2",
    "less-loader": "^7.0.2",
    "node-sass": "^4.14.1",
    "postcss-loader": "^4.0.4",
    "sass-loader": "^10.0.3",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

5. 配置babel转换ES6语法，安装后根目录创建babel.config.js文件，配置如下：

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

6. 配置postcss为生产的css代码自动添加兼容前缀，安装postcss后在根目录新建postcss.config.js，配置如下：

// 配置postCSS 自动添加css的兼容前缀
const autoprefixer = require('autoprefixer')

module.exports = {
    plugins: [autoprefixer]
}

7. 如果项目还需要其他的插件或者loader npm安装后在webpack.config.js中配置即可