webpack_for_vue
Description
借助webpack手动创建vue项目，以时间轴顺序依次记录每一步操作过程
创建package.json文件
npm init -y新建index.html、app.js文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<script src="./public.js"></script>
</body>
</html>
app.js
alert('打包测试');安装webpack
cnpm install -g webpack --save
cnpm install -g webpack-dev-server --save打包文件
webpack app.js --output-filename public.js --output-path . --mode development执行webpack app.js public.js 报错
一、You have installed webpack-cli and webpack-command together. To work with the “webpack” command you need only one CLI package, please remove one of them or use them directly via their binary.
意思是安装了两个脚手架，删掉一个就好了
cnpm remove –global webpack-command
二、用webpack app.js public.js会出现webpack4.0语法警告
改为webpack app.js –output-filename public.js –output-path . –mode development即可
引入文件
新建people.js,修改app.js
people.js
module.exports = '引入文件测试';
app.js
alert(require('./people.js'));引入的自定义文件必须带有./，区别于npm下载的文件
引入文件后重新执行打包命令，修改就作用于HTML上了
监听文件修改，自动打包
webpack app.js --output-filename public.js --output-path . --mode development --watch打包文件末尾添加 –watch即可监听
此时只要app.js中或引入的文件发生改变就会重新打包
引入第三方
cnpm install jquery --save修改people.js、app.js
people.js
let people = [
{
name: 'teacher'
},
{
name: 'public'
},
{
name: 'babel'
}
];
module.exports = people;
app.js
let people = require('./people.js');
let $ = require('jquery');
$('body').append(`<h1>${people[0].name}</h1>`);打包静态文件
创建style.css文件
body{
background-color: aqua;
}引入依赖
cnpm install css-loader style-loader --save修改app.js
let people = require('./people.js');
let $ = require('jquery');
**************
require('!style-loader!css-loader!./style.css'); // 每个css文件需要单独修饰
**************
$.each(people, function (key, value) {
$('body').append(`<h1>${value.name}</h1>`);
});配置webpack配置文件
新建webpack.config.js
module.exports = {
// 入口文件
entry: './app.js',
// 出口文件
output: {
// 文件路径
path: __dirname,
// 文件名称
filename: 'public.js'
},
// 需要依赖的插件或加载器
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}module下配置4.0前版本为
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]use: [‘style-loader’, ‘css-loader’]的完全书写为
use: [{
loader: "style-loader"
},{
loader: "css-loader"
}]修改app.js
let people = require('./people.js');
let $ = require('jquery');
******************
require('./style.css');
******************
$.each(people, function (key, value) {
$('body').append(`<h1>${value.name}</h1>`);
});规范项目结构
新建src文件夹
├── README.md
├── index.html
├── package.json
├── public.js
├── src
│ ├── css
│ │ └── style.css
│ └── js
│ ├── app.js
│ └── people.js
└── webpack.config.js修改webpack.config.js配置文件
module.exports = {
// 入口文件
***************
entry: './src/js/app.js',
***************
// 出口文件
output: {
// 文件路径
**************
path: __dirname + '/dist',
******************
// 文件名称
filename: 'public.js'
},
// 需要依赖的插件或加载器
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}此时执行webpack命令即可实现文件打包，webpack会自动找到入口，打包后输出到出口
修改app.js
let people = require('./people.js');
let $ = require('jquery');
**************
require('../css/style.css');
************
$.each(people, function (key, value) {
$('body').append(`<h1>${value.name}</h1>`);
});修改index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
******************
<script src="dist/public.js"></script>
*****************
</body>
</html>修改package.json文件
{
"name": "webpack_for_vue",
"version": "1.0.0",
"description": "#### Description {**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}",
"main": "index.js",
"scripts": {
*****************
"build": "webpack"
*****************
},
"repository": {
"type": "git",
"url": "https://gitee.com/yuanyuanandbenben/webpack_for_vue.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.1"
},
"dependencies": {
"css-loader": "^1.0.0",
"jquery": "^3.3.1",
"style-loader": "^0.23.0"
}
}
至此，打包命令可更改为npm run build
踩坑：运行npm run build必须存在一种脚手架，因为之前没有安装webpack-cli，所以cnpm install webpack-cli 总是报错，解决办法是，删除package.json中的devDependencies对象下的webpack、webpack-cli并重新安装 cnpm install webpack webpack-cli –save-dev
使用webpack-dev-server
下载依赖
cnpm install -g webpack-dev-server --save-dev配置package.json文件
{
"name": "webpack_for_vue",
"version": "1.0.0",
"description": "#### Description {**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}",
"main": "index.js",
"scripts": {
"build": "webpack",
***********************************
"start": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/public.js"
*************************************
},
"repository": {
"type": "git",
"url": "https://gitee.com/yuanyuanandbenben/webpack_for_vue.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.1"
},
"dependencies": {
"css-loader": "^1.0.0",
"jquery": "^3.3.1",
"style-loader": "^0.23.0"
}
}
start后命令行注释
webpack-dev-server 开始运行
–entry 配置入口文件
–output-filename 配置出口及文件名
npm start即可开启服务
配置babel，浏览器兼容
下载依赖
cnpm install babel-core babel-loader babel-preset-es2015 --save-dev修改webpack.config.js
module.exports = {
// 入口文件
entry: './src/js/app.js',
// 出口文件
output: {
// 文件路径
path: __dirname + '/dist',
// 文件名称
filename: 'public.js'
},
// 需要依赖的插件或加载器
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
***************************
{
test: /\.js$/,
use: [
{
// 加载器名称
loader: "babel-loader",
// 忽略文件夹
exclude: /node_modules/,
// 查询内容
query: {
presets: ['es2015']
}
}
]
}
***************************
]
}
}配置VUE
下载依赖
npm install vue vue-loader vue-style-loader vue-html-loader vue-template-compiler --save-dev