cd /
wget https://nodejs.org/dist/v8.11.3/node-v8.11.3-linux-x64.tar.xz
tar xvJf node-v8.11.3-linux-x64.tar.xz
cd node-v8.11.3-linux-x64/bin
ls
./node -v
现在 node 和 npm 还不能全局使用,做个软链接即可
ln -s /node-v8.11.3-linux-x64/bin/node /usr/local/bin/node
ln -s /node-v8.11.3-linux-x64/bin/npm /usr/local/bin/npm
下面我们创建一个目录来使用npm
cd /website
mkdir npmtest
cd npmtest
npm init
会显示
提示录入相关的信息,也可一路回车,最后yes,之后自动生成一个package.json文件
#本地局部安装webpack
npm install webpack --save-dev
安装成功后package.json文件会自动添加一行
"devDependencies": {
"webpack": "^4.12.2"
}
#安装webpack-dev-server
npm install webpack-dev-server --save-dev
在npmtest目录添加文件webpack.config.js,内容如下
var config = {
};
module.exports = config;
然后在package.json的scripts里添加一个快速启动webpack-dev-server服务的脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js"
},
当执行 npm run dev 时 就会执行 webpack-dev-server –open –config webpack.config.js的命令
由于我使用的是虚拟机,所以ip需要修改一下
"dev": "webpack-dev-server --host 192.168.123.229 --port 8080 --open --config webpack.config.js"
使用npm run命令前需要确保安装webpack-cli依赖包,否则会提示Cannot find module ‘webpack-cli/bin/config-yargs’这类错误
npm install webpack-cli
新建main.js空文件作为入口文件
修改webpack.config.js的内容如下
var path = require('path');
var config = {
entry:{
main:'./main'
},
output:{
path:path.join(__dirname,'./dist'),
publicPath:'/dist/',
filename:'main.js'
}
};
module.exports = config;
新增index.html文件,内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello webpack</title>
</head>
<body>
<p id="app">hello webpack</p>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
在npmtest目录下新建src目录
mkdir src
现在可以执行npm run dev
npm run dev
至此在浏览器中输入http://192.168.123.229:8080/ 即可浏览
===
在webpack里每个文件都是一个模块,像css,js,jpg等,对不同的模块,需要用不同的加载器(Loaders)来处理,现在要写css样式,需要安装style-loader和css-loader
npm install css-loader --save-dev
npm install style-loader --save-dev
#也可以这样
npm install css-loader style-loader --save-dev
安装完成后在webpack.config.js中进行Loaders的配置
var path = require('path');
var config = {
entry:{
main:'./main'
},
output:{
path:path.join(__dirname,'./dist'),
publicPath:'/dist/',
filename:'main.js'
},
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
]
}
]
}
};
module.exports = config;
新增style.css文件,内容为
#app{
font-size: 24px;
color:#343434;
}
修改main.js的内容为
import './style.css';
document.getElementById('app').innerHTML = 'hello';
重新执行npm run dev命令查看效果
如果需要用link标签引入css文件的话就需要安装extract-text-webpack-plugin插件
npm install extract-text-webpack-plugin --save-dev
这里需要注意的是webpack4.0以上使用extract-text-webpack-plugin会报错
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
处理方法
使用该方式npm install extract-text-webpack-plugin@next –save-dev 解决
新增page.css文件,内容为
*{
margin:0;
padding:0;
font-size: 12px;
}
给index.html加上link标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello webpack</title>
<link rel="stylesheet" href="/dist/page.css">
</head>
<body>
<p id="app">hello webpack</p>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
webpack.config.js导入插件并改写loaders的配置
var path = require('path');
//导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
entry:{
main:'./main'
},
output:{
path:path.join(__dirname,'./dist'),
publicPath:'/dist/',
filename:'main.js'
},
module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'style-loader'
})
}
]
},
plugins:[
//重命名提取后的css文件
new ExtractTextPlugin("page.css")
]
};
module.exports = config;
重新执行npm run dev命令查看效果
每次修改文件都要重启服务,建议安装nodemon。
nodemon用来监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中
#全局安装
npm install -g nodemon
#本地安装
npm install nodemon --save-dev
=====
vue相关
使用.vue文件需要安装vue-loader和vue-style-loader等加载器
npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime
babel相关建议使用新的babel-preset-env 。
https://zhuanlan.zhihu.com/p/29506685
https://segmentfault.com/p/1210000008466178 即
npm install --save-dev babel-preset-env
修改webpack.config.js来支持vue文件和ES6的解析
var path = require('path');
//导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
entry:{
main:'./main'
},
output:{
path:path.join(__dirname,'./dist'),
publicPath:'/dist/',
filename:'main.js'
},
module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'style-loader'
})
},
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
css:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'vue-style-loader'
})
}
}
},
{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/
},
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'style-loader'
})
}
]
},
plugins:[
//重命名提取后的css文件
new ExtractTextPlugin("page.css")
]
};
module.exports = config;
新增 .babelrc文件,内容如下
{
"presets":["env"],
"plugins":["transform-runtime"],
"comments":false,
}
新增app.vue文件
<template>
<div class="vdiv">{{name}}</div>
</template>
<script>
export default {
data(){
return{
name:'vuejs'
}
}
}
</script>
<style>
.vdiv{
color:#f60;
}
</style>
修改main.js文件
//import './style.css';
//document.getElementById('app').innerHTML = 'hello';
//导入Vue框架
import Vue from 'vue';
//导入app.vue组件
import App from './app.vue';
//创建Vue实例
new Vue({
el:'#app',
render:h => h(App)
})