配置webpack
第一步: 配置 npm install -g webpack
第二步: 设置全局(在你的项目目录里面按住shift+鼠标右键打开命令窗口) npm --save-dev webpack
第三步:建立文件夹app
里面放main.js work.js
文件
建立文件夹public
里面放index.html
文件
第四步:在main.js
里面引入require('./work.js');
//入口文件
work.js
里面就是你要写的项目文件
第五步:在index.html
里面引入webpack
文件 (<script type="text/javascript" src="./webpack.js "></script>)
第六步:在当前项目文件夹里面打开命令窗口输入
webpack app/main.js public/webpack.js
public/webpack.js
就是生成的压缩文件
webpack
是个命令 app/main.js
意思是到这个文件夹里面 public/webpack.js
就是把main.js
的文件通过webpack
生成到public
文件夹下面的webpack.js
里面
简便的编译
在项目文件夹下面新建一个webpack.config.js
文件(一定是这个名字),
在里面输入你要生成的文件
module.exports ={
//入口文件的文件(文件是app文件夹里面的main.js)
entry:__dirname+"/app/main.js",
output:{
// 打包后放置的位置(在public文件夹里面生成webpack打包文件)
path:__dirname+"/public",
// 打包后我们的文件
filename:'webpack.js'
}
}
生成包
在此文件窗口输入webpack
就可以生成
用法
在index.html文件里面引入
<script type="text/javascript" src="./webpack.js "></script>
第二中配置全局
在package.json里面
"start":"webpack",
标准建立打包流程
1:新建webpack.config.js
2: 在package.json的script里面
"scripts": {
"start":"webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
可以输入npm start就可以生成
var webpack = require("webpack");
//var Html = require("html-webpack-plugin");
module.exports ={
//入口文件的文件
entry:__dirname+"/app/main.js",
output:{
// 打包后放置的位置
path:__dirname+"/public",
// 打包后我们的文件
filename:'webpack.js'
},
//配置json css
module:{
loaders:[
{
test:'/\.json$/',
loader:'json-loader'
},
{
test:'/\.css$/',
loader:'style!css!postcss'
},
{
test:'/\.js$/',
loader:'babel-loader',
exclude:/node_modules/,//屏蔽这里面的js文件
query:{
presets:["es2015"]
}
}
]
},
plugins:[
new webpack.BannerPlugin("诸葛苍穹"),
// new Html({
// template:__dirname + '/app/index.html'
// })
],
//postcss:[autoprefixer({browsers:['last 2 versions']})]
devServer:{
contentBase:'./public',//所加载的页面所在的目录
colors:true,
inline:true, //实时刷新
hot:true
}
}