1.刚开始新建一个项目,生成一个package.json
npm init
2. .-save和save-dev是安装本地项目模块,全局为-g
可以省掉你手动修改package.json文件的步骤。
spm install module-name -save 自动把模块和版本号添加到dependencies部分
spm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分
3.某次配置webpack遇到的问题
首先是教程博客
https://www.jianshu.com/p/42e11515c10f
问题1:报错
解决:https://blog.csdn.net/hqbootstrap1/article/details/81034435
问题描述:在正式使用webpack环节,因为up主用的是3.x版本,我的是4.x,语法变了。
webpack app/main.js public/bundle.js 需要换成webpack app/main.js -o public/bundle.js(中间多了-o,语法更严格)
4.区别 dependencies、devDependencies
我们在执行 npm install 安装依赖时,通常都会将依赖的名称、版本要求写入 package.json 文件。
其中有两个命令行参数:
–save-prod 将依赖的名称、版本要求写入 dependencies(npm install --save也行)
–save-dev 将依赖的名称、版本要求写入 devDependencies
从命令行参数字面上,我们就能看出 dependencies、devDependencies 的区别:dependencies 表示我们要在生产环境下使用该依赖,devDependencies 则表示我们仅在开发环境使用该依赖。
举个例子,我要用 webpack 构建代码,所以在开发环节,它是必需的,但对普通用户来说,它是不必要的,所以安装 webpack 时,我要执行:
npm install webpack --save-dev || npm install webpack -D
而不是:
npm install webpack --save-prod || npm install webpack -S
5. npm init -y
create a package.json file
Generate it without having it ask any questions
6.用过的loader记录
-
url-loader
优化原来的雪碧图方式,把小于limit的图片转变为base64编码放到js中,把大于limit以普通物理文件显示
要起作用还要在webpack官网找到内容并且加入到webpack.config.js的rules中 -
file-loader
默认情况下,生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。
不需要在webpack.config.js中的rules中加入webpack官网的内容
“/public/path/0dcbbaa7013869e351f.png” -
babel-loader 把es6 es7的代码做兼容化,适配不支持es6的浏览器(举例:es7语法 async await)
babel-loader补充:当要babel jsx时,需要在webpack.config.js中引入相应的rules,并且要在presets后加一个属性plugins: [’@babel/plugin-transform-react-jsx’],同时修改test: /\.js$/
为test: /\.(js|jsx)$/
。别忘记npm react和@babel/plugin-transform-react-jsx
7.package.config.json中的mode
mode: ‘development’ 开发模式
简化了 webpack --mode development index.js -o output_test_d.js,只需要webpack指令就行
mode: ‘production’ 生产模式
简化了webpack index.js -o output_test.js