webpack初体验

在win10环境下,使用webpack4.0

第一步:

指定某文件夹,执行,mkdir 项目名称, cd 项目名称,执行npm init -y, 然后在执行npm install webpack webpack-cli -D,然后用Vscode编辑器打开项目.

注意:webpack4.0将webpack内核和cli进行了分离,所以webpack webpack-cli 要同时安装

第二步:

在根目录下创建webpack.config.js,内容如下

'use strict' //严格模式
const path = require('path'); //webapck中的path模块
module.exports = { //webpack 暴露出去文件语法
    mode: 'production', //生成环境,这里我写的是生成环境
    entry: './src/index.js', //入口文件
    output: {  //出口文件
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}
第三步:
在根目录下创建src文件夹,在src内创建index.js和helloworld.js两个js文件
helloworld.js内容是
'use strict'
export function helloworld () {
    return  "hello world";
}
index.js内容是
'use strict'
import { helloworld } from './helloworld'
document.write( helloworld )
 
第四步:
在终端执行 ./node_modules/.bin/webpack
为了方便:也可以在package.json文件中的scripts中配置 "build" : "webpack"
 
第五步:
执行 npm run build 正常显示dist目录说明初体验成功了
 
备注:可以在dist目录中创建index.html引入bundle.js,在浏览器看效果
 
小凤凰newObject
原文地址:https://www.cnblogs.com/xiaofenghuang/p/11942571.html