webpack打包其它类文件

webpack打包其它类文件

webpack默认可以打包js/json文件，当你需要打包其他文件时，就需要引入对应的loader
loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

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

安装完这两个loader后，devDependencies里会自动添加这两个loader的信息。
然后我们在webpack.config.js里配置loader的信息

module: {
    rules: [
      {
        test: /\.css$/,		//支持正则，以.css结尾的文件
        use: [ 'style-loader', 'css-loader' ]		//使用这两个loader来转换加载
      }
    ]
  }

下面这两个loader能够让你使用图片文件

cnpm install file-loader url-loader --save-dev

同理，需要添加配置

module: {
    rules: [
		{
			test: /\.(jpg|png|gif)$/,		//以这三个结尾的文件
			use:[
				{
					loader: 'url-loader',		//使用这个loader
					options: {						//当文件小于8192b时，直接将文件打包进js文件中，以base64的格式
						limit: 8192
					}
				}
			]
		}
    ]
  }

webpack打包，有可能图片不显示，找不图片，这时我们需要在output配置中加上publicPath参数

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist/js/'),
	publicPath: "./js/",		//此路径是相对于HTML页面的路径
  },

也可以直接将html文件拖到和文件同一文件夹下
https://www.webpackjs.com/loaders/css-loader/