安装 webpack
npm install -g webpack
npm install -g webpack-cli@2.x
初始化项目
npm init -y
npm install --save -dev webpack@3.x 参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中,包安装在指定项目的node_modules文件夹下
webpack js中自带模块化
D:\WebstormProjects\webpack1>webpack src/app.js dist/bundle.js 入口文件 出口文件
或者配置webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
在package.json 中配置 代替 webpack命令
"scripts": {
"built":"webpack"
},
npm run built
webpack自带服务器
安装服务器
D:\WebstormProjects\webpack1>npm install -g webpack-dev-server@2.x
本地安装
D:\WebstormProjects\webpack1>npm install -D webpack-dev-server@2.x
运行服务器
D:\WebstormProjects\webpack1>webpack-dev-server
代替webpack-dev-server命令 在
package.json 中配置
"scripts": {
"built": "webpack",
"dev":"webpack-dev-server"
},
npm run dev
配置项目默认访问路径
--content-base dist
"dev":"webpack-dev-server --content-base dist"
相当于
http://localhost:8080/dist
热更新
--inline
"dev":"webpack-dev-server --content-base dist --inline"
修改端口
--port=8081
"dev":"webpack-dev-server --content-base dist --inline --hot --port=8081"
本地安装json-loader 将json格式的数据转换成js对象
默认已经安装
npm install -D json-loader
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module:{
rules:[
{
test:/\.json$/,
use:"json-loader"
}
]
}
};