程序猿~

webpack小记

2019-06-05  本文已影响0人  红笔黑字

就如之前遇到配置问题:前辈告诉我,如果是完全不懂的,最好的办法就是卸载重装(初学时真是很好用),以及完完全全按照别人的路子,最后以自己的知识量模仿成别人的样子——再百度不到、解决不了,一旦解决就要经历成长了。

好了,webpack安装及使用(我经历的顺序,可简化,此处记录用):

版本:4+,特点:需要cli

全局安装

cnpm i -g webpack
cnpm install -g webpack-cli
或者合并成下面的
cnpm install -g webpack webpack-cli

创建文件夹初始化

mkdir webpack
cd webpack
npm -init y  //初始化,y即yes

创建入口文件夹

//一般是scripts
mkdir scripts

放入index.js文件,即要编译的内容

// 搬的别人的
const s=()=>{ 
    console.log('s init')
  }
s()

webpack文件夹下创建webpack.config.js文件

const path = require("path");
module.exports = {
    entry: {
        index: "./scripts/index.js" //入口文件,若不配置webpack4将自动查找src目录下的index.js文件
    },
    output: {
        filename: "[name].bundle.js",//输出文件名,[name]表示入口文件js名,是占位符,根据entry的key
        path: path.join(__dirname, "dist")//输出文件路径
    }
}

执行webpack生成dist/[name].bundle.js

不过,如上——我的没有生成。用的全局的webpack,但是提示我找不到moudle文件

我的解决是:再安装局部的webpack。尝试了只安装局部webpack,会读不到webpack,可能是需要添加到环境变量?

上一篇下一篇

猜你喜欢

热点阅读