webpack项目应用

初始化npm

npm init

安装webpack

npm install webpack --save--dev

创建项目所需的文件夹

mkdir src

mkdir dist

在根目录创建初始化index.html 并引入打包后的js 文件

<script src="hello.bundle.js"></script>

创建webpack配置文件 webpack.config.js,webpack会自动寻找这个文件去运行配置

在配置文件中配置如下信息：

var path = require('path')
module.exports = {
  entry: './src/script/main.js',//打包的入口
  output: {
    path: path.resolve(__dirname, './dist/js'), //打包后文件的位置
    filename: 'bundle.js'//打包后文件的名称
  }
}

起初没有引入path 模块，就会出现错误，配置完后，直接在命令行运行webpack ，就可以成功打包js文件到dist/js/bundle.js文件中
如果把webpack.config.js 改名为 webpack.dev.config.js 时，输入命令webpack 就不能用，需要加一段命令 如下

webpack --config webpack.dev.config.js

配置webpack 打包配置，可以在package.json文件的scripts属性内容如下：

再次打包时只需要输入 npm run webpack 即可打包文件

使用插件html-webpack-plugin，先安装插件, 然后配置如下信息:

给 htmlWebpackPlugin({ template: 'index.html' }), 以根目录index.html为模板，动态创建index.html在dist文件夹中

对插件的一般配置和操作截图：

多页应用程序的配置如下