Webpack 学习笔记

来源：互联网发布：淘宝助理一口价编辑：程序博客网时间：2024/06/10 00:19

webpack资料

webpack demo

前期准备

npm init
npm install jquery –save
npm install webpack –save-dev

demo构建

初始化

src/index.js

var $ = require('jquery');$('body').html('Hello');

webpack.config.js

module.exports = {    entry:  './src',    output: {        path:     'builds',        filename: 'bundle.js',    },};

index.html

<!DOCTYPE html><html><body>    <h1>My title</h1>    <a>Click me</a>    <script src="builds/bundle.js"></script></body></html>

entry 指定了demo的入口为 src/index.js
$ webpack webpack 会自动将 src/index.js 以及其中的以来打包到 build/bundle.js 中
$ webpack --display-modules 可以看到具体打包了那些模块
$ webpack --watch 会监听文件变化，自动重新打包

loader使用

babel

在 babel6.0 中不仅仅要安装 babel-loader 还要安装 babel- preset-es2015
参考
$ npm install babel-loader babel-preset-es2015 --save-dev

webpack.config.js

module.exports = {  entry:  './src',  output: {    path:     'builds',    filename: 'bundle.js'  },  module: {    loaders: [      {        test: /\.jsx?$/,        loader: 'babel-loader',        include: /src/,        query: {          presets: ['es2015']        }      }    ]  }};

src/index.js

import $ from 'jquery';$('body').html('hello');

0 0