webpack学习笔记

webpack学习

5/27/2017 12:15:10 PM

安装

全局安装

npm install webpack -g

初始化npm项目

npm init

本地安装

cnpm install webpack –save-dev

执行“webpack source.js target.js”命令将source.js文件变为target.js文件

webpack entry.js bundle.js

文件之间的依赖关系

例子：首先创建一个name.js文件，其暴露出一个字符串

module.exports = ‘module dependency’;

在entry.js文件中引用name.js暴露出的东西

var modulename = require('./name');alert(modulename);

结果将会弹出“module dependency”

loader

webpack默认是将js转化为js，如果需要将html和css也转化为js，则需要相应的loader

css-loader：可以处理css文件

style-loader：应用css里面的样式

安装：

cnpm install css-loader style-loader –save-dev

创建一个css文件，如style.css

在js文件中引入css文件，注意css文件要加上相对路径

require(‘style-loader!css-loader!./style.css’);

这样就可以将css文件加到就是文件中了

webpack的配置文件

在根路径下创建“webpack.config.js”文件

module.exports = {  entry: './entry.js',      //入口文件  output: {                 //生成的文件    path: __dirname,    filename: 'bundle.js'  },  module: {    loaders: [      {test: /\.css$/, loader: 'style-loader!css-loader'}      //针对css文件使用loader    ]  }}

在js引用css文件就可以不用写相应的loader了

require('./style.css');

在dos窗口中执行“webpack”命令即可

source-map

在命令行中输入“webpack –devtool source-map”，将会生成一个“bundle.js.map”文件，在进行“debugger;”时非常方便

webpack –devtool source-map

在webpack的配置文件中写上，在执行“webpack”命令时将会生成.map

devtool: 'source-map',module: {

与babel一起使用

在命令行安装

npm install babel-loader babel-core babel-preset-es2015 –save-dev

1.创建babel的配置文件“.babelrc”，内容：

{  "presets": ["es2015"]}

2.在webpack配置文件中，配置当处理js文件使用babel处理

{test: /.css$/, loader: ‘babel’}

webpack-dev-server

可以为我们生成一个开发使用的服务器，热替换功能

安装

1.全局安装

npm install webpack-dev-server -g

2.本地安装

npm install webpack-dev-server –save-dev

3.开启服务，并启动热替换（只替换有变化的地方）

webpack-dev-server –inline –hot

react

安装

npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader –save-dev

npm install react react-dom –save-dev

修改webpack的配置文件

{test: /\.css$/, exclude:/node_modules/, loader: 'react-hot!babel'}

修改babel配置文件

{  "presets": ["es2015", "react"]}

---

自动补全

resolve: {    extensions:['', '.js', '.css', '.jsx']  //自动识别补全}