webpack安装及基础配置

来源:互联网 发布:js获取id的属性值 编辑:程序博客网 时间:2024/04/26 09:19

webpack入门安装(Windows系统)

安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.全局安装: cnpm install -g webpack 

2.基本设置 :

首先,让我们创建一个目录,初始化npm,并在本地安装webpack:

mkdir webpack-demo && cd webpack-demo

cnpm init -y

cnpm install --save-dev webpack

3.创建以下目录结构和内容:

现在采用webpack;文件目录如下:

将根目录下的index.js放到dist下,然后使用cnpm install --save-dev lodash

修改index.js如下:

建立webpack.config.js

基础配置如下:

__dirname node的全局根目录

在index.js引入bundle.js

运行 webpack 命令

在dist目录下就会有bundle.js

如果你不愿意使用webpack命令,也可以如下操作:

同样可以成功编译。此时文件目录:

小结:webpack全局安装 cnpm install -g webpack

webpack 新建项目:

mkdir webpack-demo && cd webpack-demo

cnpm init -y

cnpm install 

webpack.config.js基础配置

module.exports = {

entry: __dirname+ "入口文件地址",

output: {

filename: "编译后的文件名",

path: __dirname + "打包后文件的存放目录"

}

}

webpack官网:https://webpack.js.org

原创粉丝点击