npm init -y 复制代码

这里的init表示初始化一个 npm 项目, -y 表示全部选 yes,不加的话会提示输入一些项目信息,比如项目名,版本号,作者...

安装 webpack4 npm install webpack webpack-cli webpack-dev-server -D 复制代码

这其实是一条合并的命令,拆开就是

npm install webpack -D npm install webpack-cli -D npm install webpack-dev-server -D 复制代码 install 是安装的意思; -D 表示安装到本地开发环境,不使用全局安装是因为每个项目可能用的 webpack 版本不一样导致冲突 第一条安装的是 webpack 的核心文件,就好比是安装包 第二条是让 webpack 支持类似 npm run dev 这种命令行命令 第三条安装的是可以使 webpack 支持实时编译的拓展包 初始化 npm 配置及文件

现阶段的目标是让它能运行起来

现在目录下应该有一个文件夹,两个 .josn 文件


[ webpack4 ] 配置属于自己的打包系统教程(一)―― 基础配置篇
node_modules 用来存放所有安装的 npm 包 package.json 在这里配置 npm run 的脚本,以及包含项目信息,安装了哪些包 package-lock 详细的包的版本来源,确保项目所有开发人员用的都是一个版本 调整 package.json

官方推荐移除文件中的入口配置,这样可以防止意外发布你的代码。

"main": "index.js" 复制代码

并加上私有属性配置

"private": true 复制代码

运行webpack 可以用在命令行输入 npx webpack

但是这样的运行方式在配置了开发环境和生产环境时,再运行需要写很多参数

所以添加一个 npm 脚本,之后运行 输入 npm run test 即可,有参数后在后边追加即可

"test": "webpack" 复制代码

最后看起来像这样


[ webpack4 ] 配置属于自己的打包系统教程(一)―― 基础配置篇
新建入口文件及生成出口文件

在 webpack 4 中,可以无须任何配置使用,做完上边的操作后可以在命令行输入 npm run test 运行 webpack(这里的 test 是在上边 scripts 里自己定义的),但是会显示这样的结果。


[ webpack4 ] 配置属于自己的打包系统教程(一)―― 基础配置篇

这是因为入口文件不存在,webpack 默认是将当前目录下的 ./src/index.js 当做要打包的文件(入口),新建一下 src 目录和 index.js 文件,就可以正常了。


[ webpack4 ] 配置属于自己的打包系统教程(一)―― 基础配置篇

这时会生成一个 dist 目录以及目录里有一个 main.js,这是默认的打包好的文件及目录(出口),这样一个 webpack 算是初始化完成了。


[ webpack4 ] 配置属于自己的打包系统教程(一)―― 基础配置篇
[ webpack4 ] 配置属于自己的打包系统教程(一)―― 基础配置篇

注:

最终发布时如果只需要一个 js,那么开发时 index.js 里推荐是只用来引入其他 js 文件(import)。 在截止 2018年12月31日 据我所知道的目前 import 和 export 还只是概念上的标准, js 还不能原生支持 import 和 export ,大家能使用是因为配置了 babel ,通过 babel 进行编译,使其变成 node.js 的代码,使其可以将这条命令视为加载模块。 nodejs 采用CommonJS规范,关于 ES6 这方面的可以看ES6 Module 的语法。 webpack4 入口出口配置

在上面也说了 webpack4 现在可以无需使用任何配置文件就可以使用,但是有些东西还是弄成自己喜欢的比较好

新建配置文件

在当前目录下新建一个 webpack.config.js 文件,并写入代码

const path = require('path');//[1] module.exports = { //[2] }; 复制代码 1 是引入 node 的 path 模块,这样就可以处理文件与目录的路径,处理路径是因为 windows 系列和 linux 系列在路径的表示上不太一样。 2 是对外暴露大括号 {} 中的内容,用来写我们自定义的配置 注:关于配置文件名,wepack4 默认是会引入 ./webpack.config.js ,如果想自己改名字的话可以在命令行输入一下代码,其中 webpack --config 是必须的, my.config.js 是自己自定义的配置文件的路径 webpack --config my.config.js 复制代码 入口配置

为了能证明入口确实改了有效果,我将 ./src/index.js 的文件名改为 2048.js,并放到./src/js/2048.js ; 并修改代码

const path = require('path'); module.exports = { entry: "./src/2048.js"//add }; 复制代码

在不加上面代码时会报之前的找不到入口的错误,加了以后会显示正常输出了,并且 ./dis 下会多一个 2048.js 的文件,


[ webpack4 ] 配置属于自己的打包系统教程(一)―― 基础配置篇
多入口配置

entry 不光能赋值绝对路径的字符串,还能赋值多个路径的数组或对象

entry: './src/2048.js'//单入口 字符串传参 entry: ['./src/js/2048.js','./src/js/1024.js','./src/js/512.js']//多入口 数组传参 entry: {//多入口 对象传参 2048: './src/js/2048.js', 1024: './src/js/1024.js', 512: './src/js/512.js' } 复制代码 出口配置

出口跟入口不太一样,入口可以有很多,但是只有一个输出配置。

output: { filename: '2048.js', path: 'C:/Users/GengShaojing/Desktop/2048/dist' } 复制代码 filename 打包后文件的文件名。 path 打包后文件的的绝对路径。 多入口多输出文件 output: { filename: '[name].js',//[1] path: path.resolve(__dirname, 'dist')//[2] } 复制代码 1 [name] 表示使用 entry 传递过来的文件的文件名或者对象的 key 值 2 __dirname 指向当前文件(webpack 配置文件)的绝对路径, path.resolve 是解析路径并在路径后加上 dist

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:[ webpack4 ] 配置属于自己的打包系统教程(一)―― 基础配置篇
本站链接:https://www.codesec.net/view/628135.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(130)