webpack学习初体验

参考webpack中文学习指南:http://webpackdoc.com/install.html

首先全局安装webpack

npm install webpack -g

若安装成功,执行webpack -h会返回版本号和操作提示
进入项目目录
(1)执行npm init 初始化一个package.json;然后为当前项目也安装一下webpack,这样才能在本地跑起来;webpack-dev-server是开发工具

npm install webpack --save-dev
npm install webpack-dev-server --save-dev

(2)新建一个index.html

<html>
<head>
  <meta charset="utf-8">
head>
<body>
  <script src="bundle.js">script>
body>
html>

(3)新建一个webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './entry.js',
  output: {
    path: 'dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  },
  plugins: [new webpack.BannerPlugin('This file is created by yougf'),new HtmlWebpackPlugin()]
}

这里使用了html-webpack-plugin模块和css-loader和style-loader模块,因此需要在控制台输入


npm install html-webpack-plugin --save-dev
npm install css-loader style-loader --save-dev

BannerPlugin属于内置模块,不需要自己安装,用于给文件开头添加注释语句’This file is created by yougf ‘

(4)新建一个entry.js

require('./style.css')
require('./module.js')

entry.js罗列了项目所需要的各种文(mo)件(kuai),这里就新建一个style.css文件和一个module.js文件
为了验证文件加载成功,可以在style.css里使用样式代码

body { background: pink; }

在module.js打印出内容:

document.write("This is from module");

打开dist目录下的index.html可以看到:
webpack学习初体验_第1张图片

你可能感兴趣的:(学习笔记,工具,web)