webpack入门-踩坑篇

1.安装webpack

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

这里记得一定要全局安装webpack，不然无法在命令行执行webpack指令

2.准备阶段

npm init

执行后会在根目录生成一个package.json的文件文件目录结构如下：

// Greeter.js
module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = "Hi there and greetings!";
    console.log("test");
    return greet;
};

//main.js 
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Webpack Sample Project</title>
    </head>
    <body>
        <div id='root'>
        </div>
        <script src="bundle.js"></script>
    </body>
</html>

//webpack.config.js
module.exports = {
    //devtool: 'eval-source-map', //用于调试代码
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public", //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    }
}

3.执行命令打包

当我们在根目录下有上面写好完整的webpack.config.js之后，我们可以在命令行执行webpack执行打包，如果成功就会在public文件夹生成一个bundle.js文件

当然你还可以在package.json自己定义好一个执行命令来代替这些繁琐的命令，例如

//package.json
{
  "name": "wscat-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^1.14.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack" 
  },
  "author": "",
  "license": "ISC"
}

加上这句之后

"start": "webpack" //配置的地方就是这里啦，相当于把npm的start命令指向webpack命令 你就可以执行npm run start

还有注意的是，如果不加下面的代码，在调试代码的时候很可能就找不到行数了

devtool: 'eval-source-map', //用于调试代码

加了之后就会显示未合并之前的文件所在行数

未加则显示合并后在bundle.js的行数

devtool选项对应的配置结果

1.source-map:在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度

cheap-module-source-map:在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便 3.eval-source-map:使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项 4.cheap-module-eval-source-map:这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果就是对打包后的文件的的执行有一定影响

4.配置服务器

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

向webpack.config.js文件添加配置项

module.exports = {
    devtool: 'eval-source-map', //用于调试代码
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public", //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
                //port 设置默认监听端口，如果省略，默认为”8080“
        inline: true //实时刷新
    }
}

然后在命令行执行webpack-dev-server

在浏览器打开http://localhost:8080/ 就会显示静态页面，如果改动合并之前的相关文件，浏览器还会热更新

devserver配置选项和功能描述

1.contentBase:默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录） 2.port:设置默认监听端口，如果省略，默认为”8080“ 3.inline:设置为true，当源文件改变时会自动刷新页面 4.colors:设置为true，使终端输出的文件为彩色的 5.historyApiFallback:在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

5.css-loader

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同 css-loader使你能够使用类似@import和url(...)的方法实现require()的功能 style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中

npm install --save-dev style-loader css-loader

然后我们就可以在webpack.config.js文件里面添加这个loader的配置项

module.exports = {
    devtool: 'eval-source-map', //用于调试代码
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public", //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, ]
    },
    devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    }
}

"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来

/*main.css*/
p{
    color: red;
}
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Webpack Sample Project</title>
    </head>
    <body>
        <div id='root'>
        </div>
        <p>hello</p>
        <script src="bundle.js"></script>
    </body>
</html>

此时我们就可以在main.js里面直接引进main.css，那所有样式都会打包成js，在项目运行的时候会转化为

stjw7098 / h5-share

webpack入门-踩坑篇 #11