webpack打包

2017-05-16  本文已影响0人  独樱子

1.在D:\project\新建一个app项目

2.打开cmd,在cmd中进入app文件夹

3. D:\project\app>npm init  (执行npm init的命令,然后app文件夹中会自动生成一个package.json的文件)      

4.在app里新建一个webpack.config.js文件,文件内容如下:

var  path=require('path');

var  HtmlwebpackPlugin=require('html-webpack-plugin');//定义了一些文件夹的路径

var  ROOT_PATH=path.resolve(__dirname);

var   APP_PATH=path.resolve(ROOT_PATH,'app');

var   BUILD_PATH=path.resolve(ROOT_PATH,'build');

module.exports = {

//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字

entry: APP_PATH,

//输出的文件名 合并以后的js会命名为bundle.jsoutput:

output: {

path: BUILD_PATH,

filename: 'bundle.js'

},

//添加我们的插件 会自动生成一个html文件

plugins: [

new HtmlwebpackPlugin({

title: 'Hello World app'

})

]

};

5.在cmd中:npm install html-webpack-plugin --save-dev 

我们这里安装一个plugin,可以自动快速的帮我们生成HTML。

6.cmd里面执行    D:\project\app>wepack

上一篇 下一篇

猜你喜欢

热点阅读