webpack成神之路（一）

2019-05-11 本文已影响43人 AAA前端

webpack是干什么的网上一堆，就不赘述了。现在从零开始学习webpack;

初始化项目

git init // git 初始化
npm init  // 创建package.json.

image.png

安装webpack webpack-cli

cnpm i webpack webpack-cli --save-dev

image.png

现在就可以使用webpack了，我们先来创建一个src目录，在下面创建一个index.js；index.js内容console一段话

console.log('哈哈哈')

image.png

命令行运行webpack

image.png

然后就会发现在生成了一个dist目录，下面有webpack打包生成的main.js.

image.png

我们在根目录下创建一个html文件，并引入main.js。打开网页，打开控制台，可以看到输出了"哈哈哈";

image.png
image.png
我们试一下能不能require其他js。在src下创建一个a.js。里面console.log('我是 a.js'); 在index.js中 require('./a.js');

image.png

重新命令webpack打包文件，然后打开index.html

image.png
可以看到控制台输出了a.js中的内容。证明把多个js打包了。

当然如果我们不想用默认打包方式可以创建webpack.config.js；在里面配置我们的个性化打包方式。

image.png
webpack.config.js中的一些简单的配置；

const path = require('path');

module.exports = {
    mode: 'production', //开发模式 development  生产模式production
    entry: './src/index.js', // 入口
    output:{
        filename: "index.[hash:8].js",      // 打包后的文件名，带上8位数的hash值
        path: path.resolve(__dirname, 'build')   // 打包后的绝对路径 path自带模块相对路径转换绝对路径
    }
}

image.png

配置好webpack.config.js后，需要在package.json.中scripts中配置
启动命令

image.png
然后我们在命令行输入npm run build
可以看到在根目录打包了build文件夹，下面有一个index.18abb081.js的文件，在html中引入这个新的js。

image.png
打开网页，控制台一样输出了 ‘哈哈哈’ ‘我是 a.js’，说明配置没有问题。

当然我们也可以重命名webpack.config.js。比如我们加webpack.config.test.js

把webpack.config.js中的内容复制过来，输出文件夹改个名字试一下

image.png
package.json 中的build内容修改为 webpack --config webpack.config.test.js

image.png
可以看到打包成功，并且生成了预期的buildtest的文件夹，引入当前js到index.html中，控制台也正常打印了结果。

好了把webpack.config.test.js文件删除，package.json也回去。现在打包后的文件我是用vscode插件启动的index.html。当然webpack肯定有自己启动服务的插件。webpack-dev-server

命令行安装webpack-dev-server

image.png

package.json中配置启动命令。

image.png

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}

现在我们在命令行运行npm run serve，打开页面localhost:8080;控制台依然打印成功了。

image.png
当然我们可以配置 webpack.config.js中devServer

const path = require('path');

module.exports = {
    mode: 'production', //开发模式 development  生产模式production
    entry: './src/index.js', // 入口
    output:{
        filename: "index.[hash:8].js",      // 打包后的文件名，带上8位数的hash值
        path: path.resolve(__dirname, 'build')   // 打包后的绝对路径 path自带模块相对路径转换绝对路径
    },
    devServer:{
        port: 1234, // 端口号    不能6666-6669 ,安全限制在chrome中不能成功
        progress: true, // 加上进度条
        contentBase: './', //静态服务的目录。默认当前根目录，如果index.html在src下，这里就要改为./src
        open: true, //自动打开页面
        compress: true, //压缩
    }
}

这时会自动打开页面。控制台也打印成功

webpack成神之路（一）

猜你喜欢

热点阅读