webpack入门

1 创建项目文件夹 : webpack_test

2 创建文件 package.json

3 安装webpack

npm install webpack -g npm install webpack --save-dev

webpack 只能打包js 或 json 文件，要打包其他类型的文件，需要用到打包工具loader

webpack 打包js文件

1 项目下新建src/js/entry.js文件，文件名自己定义

2 执行 webpack src/js/entry.js dist/js/bundle.js 命令， 表示将此js文件打包到dist/js/bundle.js文件下，这个文件夹系统会新建出来

webpack 打包json 数据

新建 test.json文件，里面写入数据，执行命令与打包js相似

webpack.config.js配置

新建webpack.config.js文件，配置该文件

const path=require('path');

module.exports = {

entry: './src/js/entry.js',

output:{

filename:'bundle.js',
    path: path.resolve(_dirname,'dist/js/')

}

}

当配置好这个文件后，直接执行webpack命令，就能将所有需要打包的文件打包到dist/js/bundle.js里

接上面添加如下代码： 热加载配置

devServer:{

contentBase: 'dist/'  //webpack-dev-server默认服务于根路径下的index，添加这句表示服务于dist目录下的

}

使用插件

常用插件 : html-webpack-plugin 根据模板html生成引入script的页面 clean-webpack-plugin 清除dist文件夹