webpack前端工具

配置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 } }