1.创建一个名为webpack-study目录,进入目录
2.通过运行以下命令初始化
cnpm init -y
3、并引入 webpack 4:
cnpm i webpack --save-dev
4、我们还需要 webpack-cli ,作为一个单独的包引入:
cnpm i webpack-cli --save-dev
5.安装wepack-dev-server
cnpm i webpack-dev-server --save-dev
6.配置package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"dev": "webpack --mode development",
"ff": "webpack-dev-server --open --port 4000 --contentBase src --hot"
},
7.手动创建src 目录,在src下创建一个index.js文件,index.js为webpack4 默认入口
index.js内容
console.log('webpack运行成功')
7.1在src下创建一个index.html
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
</head>
<body>
<p>测试内容。。。</p>
</body>
</html>
8.执行命令
npm run ff
到此为止 就可以运行了,接下来装插件和loader
9. html-webpack-plugin 有2个作用 1将页面放到内存中去,2,不用引用main.js
命令:
cnpm i html-webpack-plugin -D
然后配置webpack.config.js
const path = require('path')
const webpack = require('webpack'); // 这个插件不需要安装,是基于webpack的,需要引入webpack模块
const htmlWebpackPlugin = require('html-webpack-plugin') //引入HTML插件
module.exports = {
devServer: {
open: true, // 本地服务器所加载文件的目录
port: "4000", // 设置端口号为8088
inline: true, // 文件修改后实时刷新
contentBase: 'src', //指定托管目录
hot: true // 热更新
},
plugins: [
new webpack.HotModuleReplacementPlugin(), // 热更新插件
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
]
}
10.引入jquery
安装:
cnpm i jquery -D
然后在index.js中
import $ from 'jquery'
之后就可以使用了
11.webpack默认不识别css类型,需要装 style-loader 和 css-loader
安装:
cnpm i style-loader css-loader -D
然后配置webpack.config.js
module: { //这个节点用于配置所有第三方模块,加载器
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']}
]
}
在index.js 引入 css 文件
import './css/index.css'
12.webpack默认不识别less类型,需要装 less-loader
安装:
cnpm i less-loader -D
配置webpack.config.js
module: { //这个节点用于配置所有第三方模块,加载器
rules: [
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
]
}
less-loader 要依赖于 style-loader css-loader
在index.js引入index.less
import './css/index.less'
13.webpack默认不识别 scss类型文件,需要安装 sass-loader
安装:
cnpm i sass-loader -D
之后会提示安装 node-sass
cnpm i node-sass -D
配置webpack.config.js
module: { //这个节点用于配置所有第三方模块,加载器
rules: [
{test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
]
}
sass-loader 也依赖于style-loader css-loader
14.接下来安装 url-loader 和 file-loader,因为css文件里如果引用图标或图片路径时,需要先装 这2个loader,才能使用
安装:
cnpm i url-loader file-loader -D
15.安装bootstrap,使用bootstrap图标
安装 :
cnpm i bootstrap -D
注意如果是bootstrap4 还需要安装 cnpm i open-iconic -D
如果安装不成功 可以 用这个 命令 cnpm i https://github.com/iconic/open-iconic.git -D
配置webpack.config.js
module: { //这个节点用于配置所有第三方模块,加载器
rules: [
{test: /\.(eot|otf|svg|ttf|woff)$/, use: 'url-loader'} //处理bootstrap4 图标
]
}
在index.js中
import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'
在index.html 中
<span class="oi oi-account-login"></span>
<span class="oi oi-account-logout"></span>
16.webpack 只能识别部分ES6语法,高级的无法识别,要装babel来转换下
安装:
cnpm i babel-core babel-loader babel-preset-env --save-dev
cnpm i @babel/core @babel/preset-env --save-dev
cnpm i @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
cnpm i @babel/runtime -D
配置webpack.config.js
module: { //这个节点用于配置所有第三方模块,加载器
rules: [
{test: /\.js$/, exclude: /node_modules/,use: 'babel-loader'}
]
}
在根目录下创建一个名为 .babelrc 的文件 注意前面有个点 ,json格式文件
内容如下:
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties"
]
}
在index.js文件中加入
// ES6引入了类的概念
class Person {
// 使用static 关键字,可以定义静态属性
// 所谓的静态属性就是可以直接通过 类名访问的属性
// 实例属性 只能通过类的实例来访问的属性
static info = {name: '蔡徐坤', age: 22}
}
console.log(Person.info)
17.接下来 用webpack安装vue
cnpm i vue -S
在index.js 里引入vue
import Vue from ‘vue’
注意:import 的规则是这样,
1.到node_modules 下找到vue文件夹
2.在vue文件夹找到package.json.找到main节点,main节点指定了vue.js的路径
webpack安装后,main指定的路径是,"main": "dist/vue.runtime.common.js", 这个js不是平时所用的vue.js 此时运行会报错:vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler
解决办法1.将main改成 vue.js
解决办法2 把index.js 引入代码 import Vue from 'vue' 改成 import Vue from '../node_modules/vue/dist/vue.js'
解决办法3 在webpack.config.js增加一个节点 在module后面
resolve: {
alias: {
"vue$": "vue/dist/vue.js"
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
</head>
<body>
<div id="app">
<ul>
<li v-text="msg"></li>
<li>这是第li</li>
<li>这是第li</li>
<li>这是第li</li>
<li>这是第li</li>
<li>这是第li</li>
<li>这是第li</li>
<li>这是第li</li>
<li>这是第li</li>
<li>这是第li</li>
</ul>
<div class="myImage">
</div>
<div class="myImage2">
</div>
<span class="oi oi-account-login"></span>
<span class="oi oi-account-logout"></span>
<span class='oi oi-arrow-bottom'></span>
</div>
</body>
</html>