npm和webpack的使用记录

npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

1. 安装npm,webpack

npm: 进入node.js官网下载node.js并安装,node.js自带npm,在命令行输入node -v 和
npm -v查看版本
webpack:
以全局的方式安装:
$ npm install webpack -g
  然而,我并不喜欢这种方式,因为并不是所有的项目都需要webpack的。通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。

进入项目目录, 确定已经有 package.json,没有就通过 npm init -y创建,安装 webpack 依赖
$ npm install webpack --save-dev或者$ npm i -D webpack
webpack 4.0以上的,还需要安装个命令行工具webpack-cli
$ npm i -D webpack-cli

执行打包:npx webpack
若报webpack is not defined
就在webpack.config.js里加let webpack = require(‘webpack’);

2. webpack引入jquery和bootstrap

安装jQuery

npm install jquery --save-dev

安装bootstrap

npm install bootstrap --save-dev

配置jQuery
由于 Bootstrap 依赖于 jQuery,所以在代码中 import jQuery from ‘jquery’ 是不够的,这只是解决了自己代码对 jQuery 的依赖,在此处使用了webpack.ProvidePlugin

解决方案:
在 webpack.base.config.js 头部添加

var webpack = require(‘webpack’)

在 entry 后边添加

plugins: [
new webpack.ProvidePlugin({
“$”: “jquery”,
“jQuery”: “jquery”,
“window.jQuery”: “jquery”
})
]

引入bootstrap
在 main.js 中,加入如下代码

import ‘bootstrap/dist/css/bootstrap.min.css’
import ‘bootstrap/dist/js/bootstrap.min.js’

使用webpack打包bootstrap4的时候,需要手动安装popper.js

npm install [email protected] -D
npm install popper.js -D

否则引入bootstrap后,webpack打包报错

Module not found: Error: Can't resolve 'popper.js' ....

若报:Uncaught Error: Bootstrap dropdown require Popper.js
npm和webpack的使用记录_第1张图片
解决 执行:npm install --save popper.js

在module.exports = {}中添加一下代码

plugins: [
new webpack.optimize.CommonsChunkPlugin(‘common’),
new webpack.ProvidePlugin({
jQuery: ‘jquery’,
$: ‘jquery’,
Popper: [‘popper.js’, ‘default’],
}

你可能感兴趣的:(前端工具)