webpack踩坑之路

当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

webpack --progress --colors --watch

当然，我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

# 安装 cnpm install webpack-dev-server -g

# 运行 webpack-dev-server --progress --colors

webpack插件

我们需要在js文件里，通过require的方式来引入css，我们来看具体的方法，首先需要安装css-loader，
style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。

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

然后在main.js中：

require('./app.css');

在webpack.config.js增加：

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /.css$/, loader: 'style-loader!css-loader' },
    ]
  }
};

在html中引入：

<html>
  <head>
    <script type="text/javascript" src="bundle.js"></script>
  </head>
  <body>
    <div id="test">Hello World</div>
  </body>
</html>

图片转换为base64编码、

一定要先安装html-loader并配置

{
                test:/.html$/,
                use:[
                {
                   loader:"html-loader"                 
            }
                ]
}

安装url-loader

npm install url-loader --save-dev

配置config文件

{
        test: /.(png|jpg)$/,
        loader: 'url-loader?limit=40000'      
}

注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片。

安装sass编译插件

/在项目下，运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

配置loader

module:{ //在配置文件里添加 JSON loader
		loaders:[
			{test:/.css$/,loader:"style-loader!css-loader"},
			{test:/.scss$/,loader:"style-loader!css-loader!sass-loader"}			
		]
	}

----------------------------------------------------------------------------------------------------- ---------------------------------------------慕课网教程笔记---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

创建一个webpack项目流程

npm init初始化npm安装

npm install webpack --save-dev 安装webpack

（

当你为你的模块安装一个依赖模块时，正常情况下你得先安装他们（在模块根目录下npm install module-name），然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里（dependencies）。

-save和save-dev可以省掉你手动修改package.json文件的步骤。
spm install module-name -save 自动把模块和版本号添加到dependencies部分
spm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分

）

webpack hello.js hello.bundle.js webpack打包命令

npm install css-loader style-loader --save-dev 安装css模块

webpack hello hello.bundle.js --module-bind 'css=style-loader!css-loader' 模块绑定，自动添加前缀

webpack hello hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch 监听模式（文件更改，自动更新）

安装自动生成HTML插件

cnpm install html-webpack-plugin --save-dev

webconfig配置

首先要引用

var htmlWebpackPlugin=require('html-webpack-plugin'); //自动生成html插件

module.exports={
entry:{},
output:{},
plugins:[ //实例化插件
new htmlWebpackPlugin({
filename:'index.html',
template:"index.html",
inject:'body',//指定位置
title:'webpack is good',
date:new Date()
})
]
}

webpack使用自动生成css3前缀插件，以及css文件内import css文件

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

cnpm i -D postcss-loader

cnpm install postcss-import --save-dev

loader配置

{
                test:/.css$/,
                use:[
                     'style-loader',
                     'css-loader',
                     {
                         loader:'postcss-loader',
                         options:{
                            plugins:(loader)=>[
                            require('postcss-import')({root:loader.resourcePath}),
                            require('autoprefixer')
                            ]
                         }
                     }
                ]                
            }

@import url("./flex.css");
html,body{padding: 0;margin: 0;background-color: #00A3C0;}
ul,li{list-style: none;padding: 0;margin: 0;}

cnpm i -D webpack-dev-server

webpack-dev-server --progress --colors 启动监听模式

安装html-webpack-template 可配置head头部信息(更多信息： https://github.com/jaketrent/html-webpack-template)

$ npm install html-webpack-template --save-dev
例子：

{
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      // Required
      inject: false,
      template: require('html-webpack-template'),
      // template: 'node_modules/html-webpack-template/index.ejs',

      // Optional
      appMountId: 'app',
      baseHref: 'http://example.com/awesome',
      devServer: 'http://localhost:3001',
      googleAnalytics: {
        trackingId: 'UA-XXXX-XX',
        pageViewOnLoad: true
      },
      meta: [
        {
          name: 'description',
          content: 'A better default template for html-webpack-plugin.'
        }
      ],
      mobile: true,
      lang: 'en-US',
      links: [
        'https://fonts.googleapis.com/css?family=Roboto',
        {
          href: '/apple-touch-icon.png',
          rel: 'apple-touch-icon',
          sizes: '180x180'
        },
        {
          href: '/favicon-32x32.png',
          rel: 'icon',
          sizes: '32x32',
          type: 'image/png'
        }
      ],
      inlineManifestWebpackName: 'webpackManifest',
      scripts: [
        'http://example.com/somescript.js',
        {
          src: '/myModule.js',
          type: 'module'
        }
      ],
      title: 'My App',
      window: {
        env: {
          apiHost: 'http://myapi.com/api/v1'
        }
      }

      // And any other config options from html-webpack-plugin:
      // https://github.com/ampedandwired/html-webpack-plugin#configuration
    })
  ]
}