前端之路

webpack-基础配置

2018-09-25  本文已影响1人  李不远

前言

仅适用于webpack4.+!

仅适用于webpack4.+!

仅适用于webpack4.+!

webpack的文档其实已经很详细了,也在网上找了一些教程,总结下来还是官方文档更加靠谱。可能是每个人的理解与表达的偏差。为了把流程按照自己能够接受的方式梳理一遍,决定文字记录一下。

开始

基本安装

  1. 进入指定目录,创建项目文件夹

    cd code
    mkdir webpack-demo
    
  2. 进入项目文件夹,初始化npm

    cd webpack-demo
    npm init
    //执行之后,一直回车至确认yes之后
    //或者是直接执行以下代码跳过询问
    npm init -y
    
  3. 安装webpack

    npm install webpack webpack-cli --save-dev
    //局部安装
    
  4. 目录结构

    src文件夹用来存放源代码(用来编辑的代码)dist文件夹用来存放分发代码(优化处理后用来发布的代码)

      webpack-demo
      |- package.json
    + |- /dist
    +   |- index.html
    + |- /src
    +   |- index.js
    
  5. 调整package.json文件移除main入口,确保安装包是私有的

      {
        "name": "webpack-demo",
        "version": "1.0.0",
        "description": "",
    +   "private": true,
    -   "main": "index.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1"
        },
    

创建一个 bundle 文件

jquery为例

  1. 要在 index.js 中打包jquery 依赖,我们需要在本地安装 library

    npm install --save jquery
    

    注意:--save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西

  2. src/index.js中通过 import 引入 jquery

    import $ from 'jquery'
    
  3. 生成bundle文件

    • 直接生成,通过运行以下命令直接生成main.js文件至dist文件夹内

      npx webpack
      
    • 指定出口入口

      npx webpack src/index.js --output dist/main.js
      

注意:npx可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件(./node_modules/.bin/webpack

使用配置文件并优化执行命令

虽然webpack4可以自动帮我们处理,但是我们绝大多数时候还是想要拥有对代码更强的掌控能力,所以我们还是需要去学习如何配置webpack(虽然webpack的配置真的很操蛋)

  1. 新建配置文件webpack.config.js

    const path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };
    
  2. package.json里添加scripts

      {
        "name": "webpack-demo",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
    +     "build": "webpack"
        },
    

现在,通过npm run build就可以运行了!

上一篇下一篇

猜你喜欢

热点阅读